For example:<\/h4>\n

<\/div>

import React, { useState } from "react";import ReactDOM from "react-dom";function FavoriteColor() {  const [color, setColor] = useState("blue");  return (    <>      <h1>My favorite color is {color}!<\/h1>      <button        type="button"        onClick={() => setColor("yellow")}      >Yellow<\/button>      <button        type="button"        onClick={() => setColor("blue")}      >Blue<\/button>      <button        type="button"        onClick={() => setColor("orange")}      >Orange<\/button>      <button        type="button"        onClick={() => setColor("violet")}      >Violet<\/button>    <\/>  );}ReactDOM.render(<FavoriteColor \/>, document.getElementById('root'));<\/code><\/pre> <\/div>\n
We must import<\/strong>\u00a0Hooks from\u00a0react. <\/strong>The\u00a0useState<\/strong> is used to track the application state.<\/p>\n
Rules of Hooks:<\/strong><\/h4>\n
\n
Call Hooks from React function components.<\/li>\n
Call Hooks from Top level.<\/li>\n
It cannot be conditional.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Hooks are the new feature added in the React 16.8 It lets you use state and different React functions without writing a class. React concepts does not replace your knowledge. Inside classes do not work. Hooks are the functions that “hook into” React state and lifecycle features from the function. For example: We must import\u00a0Hooks […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[16542],"tags":[16608,16609,16601,16607,16605,16602,16603,16606,16615,16613,16546,16612,16610,16611,16614,16604],"class_list":["post-3957","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-hooks-in-react-js","tag-list-of-react-hooks","tag-react-hooks","tag-react-hooks-example","tag-react-hooks-interview-questions","tag-react-hooks-tutorial","tag-react-hooks-vs-redux","tag-types-of-hooks-in-react","tag-what-is-custom-hooks-in-react","tag-what-is-lifecycle-hooks-in-react","tag-what-is-react-hooks","tag-what-is-react-hooks-interview-questions","tag-what-is-react-hooks-used-for","tag-what-is-react-hooks-vs-redux","tag-what-is-usereducer-in-react-hooks","tag-what-is-usestate-in-react"],"yoast_head":"\n