{"id":90,"date":"2025-01-24T03:57:05","date_gmt":"2025-01-24T03:57:05","guid":{"rendered":"https:\/\/techkubo.com\/react\/?p=90"},"modified":"2025-05-19T09:55:46","modified_gmt":"2025-05-19T09:55:46","slug":"react-hooks","status":"publish","type":"post","link":"https:\/\/techkubo.com\/react\/react-hooks\/","title":{"rendered":"React Hooks"},"content":{"rendered":"\n<p>React Hooks, introduced in version 16.8, revolutionized how we manage state and other React features in functional components. Before hooks, class components were essential for handling state and lifecycle methods, but hooks allow us to use these features within functional components, often simplifying our code and improving readability. Even though hooks have largely replaced the need for class components, there are no plans to remove classes from React.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are Hooks?<\/h2>\n\n\n\n<p>Hooks allow us to &#8220;hook&#8221; into React features such as state management and lifecycle methods directly within function components. This means you can manage component state and side effects without writing a class.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example of a React Hook<\/h2>\n\n\n\n<p>In this example, we&#8217;re using the <code>useState<\/code> hook to manage the state of our component. Specifically, the <code>useState<\/code> hook keeps track of our application&#8217;s state\u2014in this case, our favorite animal.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;application\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import React, { useState } from &quot;react&quot;;\nimport ReactDOM from &quot;react-dom\/client&quot;;\n\nfunction FavoriteAnimal() {\n  const [animal, setAnimal] = useState(&quot;cat&quot;);\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt;My favorite animal is {animal}!&lt;\/h1&gt;\n      &lt;button\n        type=&quot;button&quot;\n        onClick={() =&gt; setAnimal(&quot;dog&quot;)}\n      &gt;Dog&lt;\/button&gt;\n      &lt;button\n        type=&quot;button&quot;\n        onClick={() =&gt; setAnimal(&quot;cat&quot;)}\n      &gt;Cat&lt;\/button&gt;\n      &lt;button\n        type=&quot;button&quot;\n        onClick={() =&gt; setAnimal(&quot;bird&quot;)}\n      &gt;Bird&lt;\/button&gt;\n      &lt;button\n        type=&quot;button&quot;\n        onClick={() =&gt; setAnimal(&quot;fish&quot;)}\n      &gt;Fish&lt;\/button&gt;\n    &lt;\/&gt;\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(&lt;FavoriteAnimal \/&gt;);<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Hooks<\/h2>\n\n\n\n<p>You must import hooks from React. Here, we&#8217;re using the <code>useState<\/code> hook to handle the state of our application.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;JavaScript&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import React, { useState } from &quot;react&quot;;<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">State Management with Hooks<\/h2>\n\n\n\n<p>State refers to data or properties that need to be tracked in your application. The <code>useState<\/code> hook returns an array with two elements: the current state value and a function to update it. We can destructure these values and use them within our function component.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Rules of Hooks<\/h2>\n\n\n\n<p>There are three fundamental rules to keep in mind when using hooks:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Only Call Hooks Inside Function Components:<\/strong> Hooks cannot be used in regular JavaScript functions; they must be used within function components.<\/li>\n\n\n\n<li><strong>Only Call Hooks at the Top Level:<\/strong> Hooks should be called at the top level of your component, not inside loops, conditions, or nested functions.<\/li>\n\n\n\n<li><strong>Hooks Cannot be Conditional:<\/strong> Ensure hooks are always called in the same order each time a component renders.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Note: Hooks will not work in React class components.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>React Hooks, introduced in version 16.8, revolutionized how we manage state and other React features in functional components. Before hooks, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Hooks - React Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/techkubo.com\/react\/react-hooks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Hooks - React Tutorial\" \/>\n<meta property=\"og:description\" content=\"React Hooks, introduced in version 16.8, revolutionized how we manage state and other React features in functional components. Before hooks, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/techkubo.com\/react\/react-hooks\/\" \/>\n<meta property=\"og:site_name\" content=\"React Tutorial\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-24T03:57:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-19T09:55:46+00:00\" \/>\n<meta name=\"author\" content=\"Manong\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manong\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/techkubo.com\/react\/react-hooks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-hooks\/\"},\"author\":{\"name\":\"Manong\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965\"},\"headline\":\"React Hooks\",\"datePublished\":\"2025-01-24T03:57:05+00:00\",\"dateModified\":\"2025-05-19T09:55:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-hooks\/\"},\"wordCount\":300,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/techkubo.com\/react\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/techkubo.com\/react\/react-hooks\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/techkubo.com\/react\/react-hooks\/\",\"url\":\"https:\/\/techkubo.com\/react\/react-hooks\/\",\"name\":\"React Hooks - React Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/techkubo.com\/react\/#website\"},\"datePublished\":\"2025-01-24T03:57:05+00:00\",\"dateModified\":\"2025-05-19T09:55:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-hooks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/techkubo.com\/react\/react-hooks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/techkubo.com\/react\/react-hooks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/techkubo.com\/react\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Hooks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/techkubo.com\/react\/#website\",\"url\":\"https:\/\/techkubo.com\/react\/\",\"name\":\"React Tutorial\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/techkubo.com\/react\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/techkubo.com\/react\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/techkubo.com\/react\/#organization\",\"name\":\"React Tutorial\",\"url\":\"https:\/\/techkubo.com\/react\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png\",\"contentUrl\":\"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png\",\"width\":300,\"height\":220,\"caption\":\"React Tutorial\"},\"image\":{\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965\",\"name\":\"Manong\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g\",\"caption\":\"Manong\"},\"sameAs\":[\"https:\/\/techkubo.com\"],\"url\":\"https:\/\/techkubo.com\/react\/author\/manong\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Hooks - React Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/techkubo.com\/react\/react-hooks\/","og_locale":"en_US","og_type":"article","og_title":"React Hooks - React Tutorial","og_description":"React Hooks, introduced in version 16.8, revolutionized how we manage state and other React features in functional components. Before hooks, [&hellip;]","og_url":"https:\/\/techkubo.com\/react\/react-hooks\/","og_site_name":"React Tutorial","article_published_time":"2025-01-24T03:57:05+00:00","article_modified_time":"2025-05-19T09:55:46+00:00","author":"Manong","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Manong","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/techkubo.com\/react\/react-hooks\/#article","isPartOf":{"@id":"https:\/\/techkubo.com\/react\/react-hooks\/"},"author":{"name":"Manong","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965"},"headline":"React Hooks","datePublished":"2025-01-24T03:57:05+00:00","dateModified":"2025-05-19T09:55:46+00:00","mainEntityOfPage":{"@id":"https:\/\/techkubo.com\/react\/react-hooks\/"},"wordCount":300,"commentCount":0,"publisher":{"@id":"https:\/\/techkubo.com\/react\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/techkubo.com\/react\/react-hooks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/techkubo.com\/react\/react-hooks\/","url":"https:\/\/techkubo.com\/react\/react-hooks\/","name":"React Hooks - React Tutorial","isPartOf":{"@id":"https:\/\/techkubo.com\/react\/#website"},"datePublished":"2025-01-24T03:57:05+00:00","dateModified":"2025-05-19T09:55:46+00:00","breadcrumb":{"@id":"https:\/\/techkubo.com\/react\/react-hooks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/techkubo.com\/react\/react-hooks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/techkubo.com\/react\/react-hooks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/techkubo.com\/react\/"},{"@type":"ListItem","position":2,"name":"React Hooks"}]},{"@type":"WebSite","@id":"https:\/\/techkubo.com\/react\/#website","url":"https:\/\/techkubo.com\/react\/","name":"React Tutorial","description":"","publisher":{"@id":"https:\/\/techkubo.com\/react\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/techkubo.com\/react\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/techkubo.com\/react\/#organization","name":"React Tutorial","url":"https:\/\/techkubo.com\/react\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/","url":"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png","contentUrl":"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png","width":300,"height":220,"caption":"React Tutorial"},"image":{"@id":"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965","name":"Manong","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g","caption":"Manong"},"sameAs":["https:\/\/techkubo.com"],"url":"https:\/\/techkubo.com\/react\/author\/manong\/"}]}},"_links":{"self":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/90"}],"collection":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":2,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/90\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}