{"id":6852,"date":"2021-09-07T16:56:15","date_gmt":"2021-09-07T16:56:15","guid":{"rendered":"https:\/\/programmingfields.com\/?p=6852"},"modified":"2026-05-02T06:29:32","modified_gmt":"2026-05-02T06:29:32","slug":"state-in-functional-component-in-react-using-usestate-hook","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/state-in-functional-component-in-react-using-usestate-hook\/","title":{"rendered":"State in Functional Component in React Using useState Hook"},"content":{"rendered":"\n<p>The state is a kind of instance of the React component class. It can be used to hold information about the component. The data can be changed in the component over time. It is an updatable structure that can be updated while values are changed. Firstly, the state was used with the class component in React. But after the update in React version, React introduced the functional component. So, you cannot manage the state directly in the functional component as in the class component. Hence, React introduced the Hooks concept in <strong>React 16.8<\/strong> version. Mainly, the React hooks are used to play with the React life cycle methods and state. In this post, we will focus on the <strong>React<\/strong> <strong>useState<\/strong> hook.<\/p>\n\n\n\n<p>If you are an absolute beginner then no need to worry here. I am going to explain to you each and every line of code and terms.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/state-in-functional-component-in-react-using-usestate-hook\/#Why_React_Hook\" >Why React Hook?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/state-in-functional-component-in-react-using-usestate-hook\/#What_is_useState_Hooks\" >What is useState Hooks?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/state-in-functional-component-in-react-using-usestate-hook\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/state-in-functional-component-in-react-using-usestate-hook\/#Create_App_in_React_JS\" >Create App in React JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/state-in-functional-component-in-react-using-usestate-hook\/#Create_Functional_Component_in_React_JS\" >Create Functional Component in React JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/state-in-functional-component-in-react-using-usestate-hook\/#Counter_Functionality_in_React_JS_Using_useState_Hook\" >Counter Functionality in React JS Using useState Hook<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/state-in-functional-component-in-react-using-usestate-hook\/#Use_of_React_useState_Hook\" >Use of React useState Hook<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/state-in-functional-component-in-react-using-usestate-hook\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_React_Hook\"><\/span><strong>Why React Hook?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The answer is simple and straightforward. When you are creating a functional component then you can&#8217;t use the <strong>lifecycle methods<\/strong>, <strong>state<\/strong>, etc directly. So, React introduced the <strong>Hooks<\/strong> for managing state, and using the lifecycle methods in the function-based component. It allows us to hook into the React library while using the functional component. This is easy and convenient to use. It reduces the code length.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/how-to-create-loading-spinner-using-bootstrap-in-react-js\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create Loading Spinner Using Bootstrap in React JS<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_useState_Hooks\"><\/span><strong>What is useState Hooks?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The <strong>useState()<\/strong> is a function in the React that is used to manage the state in the functional component. It needs to import along with the React library in the component. We can set the initial value to the state variable. For the state management in functional components, we use react <strong>useState<\/strong> hook.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><strong>Prerequisites<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In terms of a better understanding of React Hooks, I am assuming you are familiar with the following key concepts-<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>React Basics<\/strong><\/li><li><strong>Class component in React<\/strong><\/li><li><strong>State in class component<\/strong><\/li><\/ul>\n\n\n\n<p>So, let&#8217;s start by creating a new app in React JS. For creating a <strong>React JS application,<\/strong> you will require to have the<strong>&nbsp;Node.js<\/strong>&nbsp;installed in your system.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_App_in_React_JS\"><\/span><strong>Create App in React JS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Open the terminal and hit the below command for creating a new app.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">npx create-react-app blog<\/code><\/pre>\n\n\n\n<p>Here, the React installation has started. So, wait till it completes.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-17-08-41-27.png?w=803&amp;ssl=1\" alt=\"Create React App\"\/><figcaption><strong>Create React App<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Once the installation has finished, let&#8217;s navigate to the app folder and open it in the VS code. Now, run the application to check the installation is successful.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">cd blog\nnpm run start<\/code><\/pre>\n\n\n\n<p>So, our application is running properly as shown in the result.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i2.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-18-20-31-57.png?w=703&amp;ssl=1\" alt=\"React JS Homepage\"\/><figcaption><strong>React JS Homepage<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/file-upload-in-react-js-using-laravel-8-restful-api\/\" target=\"_blank\" rel=\"noreferrer noopener\">File Upload in React JS Using Laravel 8 RESTful API<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Functional_Component_in_React_JS\"><\/span><strong>Create Functional Component in React JS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the React app, we already have a component named <strong>App.js<\/strong>. So, just remove the entire code from the component or you may create a new component. Here, I have created a function in the below snippet to return a simple message.<\/p>\n\n\n\n<pre title=\"App.jsx\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React from \"react\";\nimport \".\/App.css\";\n\nexport const App = () =&gt; {\n  return (\n    &lt;h4&gt; This is functional component &lt;\/h4&gt;\n  );\n};\n<\/code><\/pre>\n\n\n\n<p>The output will be like this.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"613\" height=\"254\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-06-15.png?resize=613%2C254&#038;ssl=1\" alt=\"Functional Component\" class=\"wp-image-6865\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-06-15.png?w=613&amp;ssl=1 613w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-06-15.png?resize=300%2C124&amp;ssl=1 300w\" sizes=\"auto, (max-width: 613px) 100vw, 613px\" \/><figcaption><strong>Functional Component Response <\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Counter_Functionality_in_React_JS_Using_useState_Hook\"><\/span><strong>Counter Functionality in React JS Using useState Hook<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For a better understanding of the <strong>useState() hook<\/strong>, I will create a counter functionality. Here, we will have two buttons. One for increment and another for the decrement. When you will click on the increment it will increment the initial value by 1. Similarly, for the decrement, it will decrement the previous value by 1.<\/p>\n\n\n\n<p>But, before applying the <strong>useState() hook<\/strong>, I just want to show the benefit of using state. So, let&#8217;s see that in the below snippet.<\/p>\n\n\n\n<pre title=\"App.jsx\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React from \"react\";\nimport \".\/App.css\";\n\nexport const App = () =&gt; {\n  let counter = 0;\n\n  const increment = () =&gt; {\n    counter++;\n    console.log(counter);\n  };\n\n  const decrement = () =&gt; {\n    counter--;\n    console.log(counter);\n  };\n\n  return (\n    &lt;div className=\"container\"&gt;\n        &lt;h4&gt; Counter {counter} &lt;\/h4&gt;\n\n        &lt;div className=\"counter-area\"&gt;\n        &lt;button onClick={increment}&gt; Increment &lt;\/button&gt;\n        &lt;button onClick={decrement}&gt; Decrement &lt;\/button&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n};\n<\/code><\/pre>\n\n\n\n<p>In the above code, I have initialized a variable <strong>counter<\/strong> with an initial value. I have added two functions. One for incrementing the counter variable value and another for the decrementing. Also, I have included a CSS file at the top for styling the button and container area for a basic style.<\/p>\n\n\n\n<pre title=\"App.css\" class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">button {\n  padding: 4px 30px;\n  margin: 10px !important;\n  font-size: 20px !important;\n  height: 50px;\n  line-height: 30px !important;\n  border-radius: 4px !important;\n  border: 1px solid #ccc;\n}\n\nbutton:hover {\n  opacity: .7;\n}\n\n.container {\n  width: 50%;\n  margin: 100px auto;\n  text-align: center;\n}\n\n.counter-area {\n  margin: 40px 0px;\n}<\/code><\/pre>\n\n\n\n<p>Refresh the browser to see the changes.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-19-39.png?resize=771%2C308&#038;ssl=1\" alt=\"\" class=\"wp-image-6869\" width=\"771\" height=\"308\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-19-39.png?w=938&amp;ssl=1 938w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-19-39.png?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-19-39.png?resize=768%2C307&amp;ssl=1 768w\" sizes=\"auto, (max-width: 771px) 100vw, 771px\" \/><figcaption><strong>Counter Functionality Layout<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Here, I have opened the developer console to see the counter value. I have clicked on the increment button two times and the counter value has been increased from 0 to 2.<\/p>\n\n\n\n<p>Also, you may notice the counter value on the UI is still 0. It is not reflecting the value in the DOM.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"907\" height=\"461\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-25-33.png?resize=907%2C461&#038;ssl=1\" alt=\"Increment Result without State\" class=\"wp-image-6872\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-25-33.png?w=907&amp;ssl=1 907w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-25-33.png?resize=300%2C152&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-25-33.png?resize=768%2C390&amp;ssl=1 768w\" sizes=\"auto, (max-width: 907px) 100vw, 907px\" \/><figcaption><strong>Increment Result without State<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>So, it doesn&#8217;t work in the normal way as we had done in the other programming languages. Now, the state comes here. We will need to store the counter value in the state variable then we can display it to the UI.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/how-to-use-axios-in-react-js-for-http-requests-handling\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use Axios in React JS For API Requests Handling<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Use_of_React_useState_Hook\"><\/span><strong>Use of React useState Hook<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before using the useState function, you will need to import the hook along with the React as showing below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, { useState } from \"react\";<\/code><\/pre>\n\n\n\n<p>Now, inside the component, just display the log console of the <strong>useState() f<\/strong>unction.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\"> console.log(useState());<\/code><\/pre>\n\n\n\n<p>In the below result, you can see it returned an array. On the <strong>first<\/strong> <strong>index, <\/strong>it is something a value that is undefined. And on the<strong> second index,<\/strong> it returned a function.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"162\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-33-37.png?resize=924%2C162&#038;ssl=1\" alt=\"Response of useState() function\" class=\"wp-image-6875\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-33-37.png?w=924&amp;ssl=1 924w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-33-37.png?resize=300%2C53&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-33-37.png?resize=768%2C135&amp;ssl=1 768w\" sizes=\"auto, (max-width: 924px) 100vw, 924px\" \/><figcaption><strong>Response of useState() function<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>So, the syntax of using <strong>useState() <\/strong>hook comes from here.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">const [ value, setValue ] = useState();<\/code><\/pre>\n\n\n\n<p>In the above syntax, we have a const array. This is the array destructuring in JavaScript. The first index<strong> <\/strong>(value) is the initial value that we will declare for it. The second index (setValue) is a function that will set the value in the first index dynamically whenever we required.<\/p>\n\n\n\n<p>So, let&#8217;s apply it in the counter snippet.<\/p>\n\n\n\n<pre title=\"App.jsx\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">\nimport React, { useState } from \"react\";\nimport \".\/App.css\";\n\nexport const App = () =&gt; {\n\n  const [ counter, setCounter ] = useState(0);\n\n  const increment = () =&gt; {\n    setCounter(counter+1);    \n  };\n\n  const decrement = () =&gt; {\n    setCounter(counter-1);    \n  };\n\n  return (\n    &lt;div className=\"container\"&gt;\n        &lt;h4&gt; Counter {counter} &lt;\/h4&gt;\n\n        &lt;div className=\"counter-area\"&gt;\n        &lt;button onClick={increment}&gt; Increment &lt;\/button&gt;\n        &lt;button onClick={decrement}&gt; Decrement &lt;\/button&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n};\n<\/code><\/pre>\n\n\n\n<p>Now refresh the page and try incrementing the value. I have increment the value from 0 to 3 by clicking on the increment button again and again.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-47-29.png?resize=814%2C271&#038;ssl=1\" alt=\"increment value using usestate hook\" class=\"wp-image-6877\" width=\"814\" height=\"271\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-47-29.png?w=907&amp;ssl=1 907w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-47-29.png?resize=300%2C100&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-47-29.png?resize=768%2C255&amp;ssl=1 768w\" sizes=\"auto, (max-width: 814px) 100vw, 814px\" \/><figcaption><strong>Incrementing Value Using useState Hook<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>In the above result, you can see the value is incremented from 0 to 3 and it is happening in real-time.<\/p>\n\n\n\n<p>Similarly, try decrementing the value. It decremented the value from 3 to 2 and so on.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"934\" height=\"312\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-47-48.png?resize=934%2C312&#038;ssl=1\" alt=\"decrement Value and Using useState Hook\" class=\"wp-image-6878\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-47-48.png?w=934&amp;ssl=1 934w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-47-48.png?resize=300%2C100&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/Screenshot-from-2021-09-07-09-47-48.png?resize=768%2C257&amp;ssl=1 768w\" sizes=\"auto, (max-width: 934px) 100vw, 934px\" \/><figcaption><meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\"><strong>Decrementing Value Using useState Hook<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>So, this is the feature of using the <strong>useState() <\/strong>hook in React for managing the state.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/form-handling-in-react-js-with-validation-using-react-state\/\" target=\"_blank\" rel=\"noreferrer noopener\">Form Handling in React JS With Validation Using React State<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>By using hook in react functional component, you have access to the <strong>React life cycle methods<\/strong>. Also, you can use the state without creating a class component. Before introducing the functional component, mainly it was only one way to use state in the class component. But through the same approach, you can write and manage the state in the functional component. So, React hooks enhanced the features in the functional component. I hope, after going through this post, you will have a basic understanding of using the <strong>useState<\/strong> hook and managing state in the functional component.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The state is a kind of instance of the React component class. It can be used to hold information about the component. The data can be changed in the component over time. It is an updatable structure that can be updated while values are changed. Firstly, the state was used with the class component in [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":6881,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1369],"tags":[2181,2178,2176,2177,2179,2180],"yst_prominent_words":[1401,191],"class_list":{"0":"post-6852","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-hooks-in-react","9":"tag-react-state-in-functional-component","10":"tag-react-state-management","11":"tag-state-management-in-react","12":"tag-usestate-in-functional-component","13":"tag-usestate-in-react-js","14":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/09\/useState-hook.png?fit=2240%2C1260&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=6852"}],"version-history":[{"count":1,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6852\/revisions"}],"predecessor-version":[{"id":8802,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6852\/revisions\/8802"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/6881"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=6852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=6852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=6852"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=6852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}