{"id":215539,"date":"2021-03-31T15:00:27","date_gmt":"2021-03-31T12:00:27","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-use-state-in-functional-react-components-cloudsavvy-it\/"},"modified":"2021-03-31T15:00:27","modified_gmt":"2021-03-31T12:00:27","slug":"how-to-use-state-in-functional-react-components-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-use-state-in-functional-react-components-cloudsavvy-it\/","title":{"rendered":"#How to Use State in Functional React Components \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a3a6f44bccf2\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" 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: #dd3333;color:#dd3333\" 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><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a3a6f44bccf2\" checked aria-label=\"Toggle\" \/><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:\/\/buradabiliyorum.com\/en\/how-to-use-state-in-functional-react-components-cloudsavvy-it\/#The_Traditional_Approach\" >The Traditional Approach<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-state-in-functional-react-components-cloudsavvy-it\/#Converting_to_a_Functional_Component\" >Converting to a Functional Component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-state-in-functional-react-components-cloudsavvy-it\/#Anatomy_of_the_useState_Hook\" >Anatomy of the useState() Hook<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-state-in-functional-react-components-cloudsavvy-it\/#Updating_the_State\" >Updating the State<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-state-in-functional-react-components-cloudsavvy-it\/#Default_Values\" >Default Values<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-state-in-functional-react-components-cloudsavvy-it\/#Using_Multiple_State_Values\" >Using Multiple State Values<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-use-state-in-functional-react-components-cloudsavvy-it\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Use State in Functional React Components \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-8770\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg?width=1200&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"React logo on a dark background\" width=\"1602\" height=\"902\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>React components can possess internal \u201cstate,\u201d a set of key-value pairs which belong to the component. When the state changes, React re-renders the component. Historically, state could only be used in class components. Using hooks, you can <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>ly state to functional components too.<\/p>\n<h2 id=\"the-traditional-approach\"><span class=\"ez-toc-section\" id=\"The_Traditional_Approach\"><\/span>The Traditional Approach<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React class components have a <code>state<\/code> property that holds their state. They provide a <code>setState()<\/code> method you can use to update the state, triggering a re-render.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> MyComponent <span class=\"kw5\">extends<\/span> React.<span class=\"me1\">Component<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    state <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>value<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"kw1\">this<\/span>.<span class=\"me1\">updateState<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>value<span class=\"sy0\">:<\/span> <span class=\"br0\">(<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span>.<span class=\"me1\">value<\/span> <span class=\"sy0\">+<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    render<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>\n            <span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;<\/span>\n                <span class=\"sy0\">&lt;<\/span>p<span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span>.<span class=\"me1\">value<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n                <span class=\"sy0\">&lt;<\/span>button onClick<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"kw1\">this<\/span>.<span class=\"me1\">updateState<\/span><span class=\"br0\">}<\/span>Increment Value<span class=\"sy0\">&lt;\/<\/span>button<span class=\"sy0\">&gt;<\/span>\n            <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n        <span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>In this example, the rendered text will always show the number in the component\u2019s state. Clicking the button will increment the value.<\/p>\n<h2 id=\"converting-to-a-functional-component\"><span class=\"ez-toc-section\" id=\"Converting_to_a_Functional_Component\"><\/span>Converting to a Functional Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>With such a simple component, it would be ideal to rewrite this as a functional component. To do so, you\u2019ll need to use the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/hooks-state.html\">useState() hook<\/a>. Hooks were added in React 16.8; prior to this release, there was no mechanism to add state to functional components.<\/p>\n<p>Here\u2019s what the above component looks like as a functional component:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> React<span class=\"sy0\">,<\/span> <span class=\"br0\">{<\/span>useState<span class=\"br0\">}<\/span> from <span class=\"st0\">\"react\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> MyComponent <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>value<span class=\"sy0\">,<\/span> setValue<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"nu0\">1<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>\n        <span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;<\/span>\n            <span class=\"sy0\">&lt;<\/span>p<span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span>value<span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>p<span class=\"sy0\">&gt;<\/span>\n            <span class=\"sy0\">&lt;<\/span>button onClick<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> setValue<span class=\"br0\">(<\/span><span class=\"br0\">(<\/span>value <span class=\"sy0\">+<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">&gt;<\/span>Increment Value<span class=\"sy0\">&lt;\/<\/span>button<span class=\"sy0\">&gt;<\/span>\n        <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n    <span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This is shorter and more readable than the class-based original. Unlike the class component, you can\u2019t access a <code>state<\/code> instance property or <code>setState()<\/code> method. Instead, <code>useState()<\/code> is called to setup the state and obtain an updater function.<\/p>\n<h2 id=\"anatomy-of-the-usestate-hook\"><span class=\"ez-toc-section\" id=\"Anatomy_of_the_useState_Hook\"><\/span>Anatomy of the useState() Hook<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hooks are a React feature which allow you to \u201chook\u201d functionality into functional components. As functions are pure and don\u2019t have instances, capabilities which were originally implemented as <code>React.Component<\/code> class methods can\u2019t be used directly. Hooks let you add these features to components without having to convert to classes.<\/p>\n<p>The <code>useState()<\/code> hook sets up an individual state property. It returns an array containing two elements: the current state value, and a function you can call with a new value to update the state.<\/p>\n<p>In the example, we\u2019re using the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\">array destructuring assignment<\/a> to unpack the array values into clearly named variables. By convention, the setter method should be prefixed with <code>set<\/code> as it takes the place of the <code>setState()<\/code> class method.<\/p>\n<p>Calling <code>useState()<\/code> declares a state variable, <code>value<\/code> in our case, which will be \u201cpreserved\u201d between function calls. That means <code>useState()<\/code> is guaranteed to return the same value each time you call it within your component. Any other variable value is lost once a function exits; React maintains state values internally to ensure you get the same one back each time your function runs.<\/p>\n<h2 id=\"updating-the-state\"><span class=\"ez-toc-section\" id=\"Updating_the_State\"><\/span>Updating the State<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The state update function is just a regular function. It\u2019s used in the <code>onClick<\/code> handler to replace the current state value. React\u2019s internal handling of state values ensures your component will then be re-rendered. <code>useState()<\/code> will supply the new value, causing the state change to be effected.<\/p>\n<p>There\u2019s an important difference compared to the <code>setState()<\/code> of class components: functional state updators <em>replace<\/em> the state, whereas <code>setState()<\/code> does a shallow merge:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>value<span class=\"sy0\">,<\/span> setValue<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>foo<span class=\"sy0\">:<\/span> <span class=\"st0\">\"bar\"<\/span><span class=\"sy0\">,<\/span> test<span class=\"sy0\">:<\/span> <span class=\"br0\">{<\/span>example<span class=\"sy0\">:<\/span> <span class=\"st0\">\"demo\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nsetValue<span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>foo<span class=\"sy0\">:<\/span> <span class=\"st0\">\"foobar\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ Results in {foo: \"foobar\"}<\/span>\n\u00a0\n<span class=\"kw1\">this<\/span>.<span class=\"me1\">state<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>foo<span class=\"sy0\">:<\/span> <span class=\"st0\">\"bar\"<\/span><span class=\"sy0\">,<\/span> test<span class=\"sy0\">:<\/span> <span class=\"br0\">{<\/span>example<span class=\"sy0\">:<\/span> <span class=\"st0\">\"demo\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">this<\/span>.<span class=\"me1\">setState<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>foo<span class=\"sy0\">:<\/span> <span class=\"st0\">\"foobar\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ Results in {foo: \"foobar\", test: {example: \"demo\"}};<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Instead of passing a new state value directly, you may also hand a function to state updators. Functions receive the current state as a parameter and should return the new state value. This is useful when working with toggleable values.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> Checkbox <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>checked<span class=\"sy0\">,<\/span> setChecked<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"kw2\">false<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> toggle <span class=\"sy0\">=<\/span> previous <span class=\"sy0\">=&gt;<\/span> <span class=\"sy0\">!<\/span>previous<span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">return<\/span> <span class=\"sy0\">&lt;<\/span>input checked<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>checked<span class=\"br0\">}<\/span> onClick<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> setChecked<span class=\"br0\">(<\/span>toggle<span class=\"br0\">)<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This helps you reuse toggling logic in multiple places within your component.<\/p>\n<h2 id=\"default-values\"><span class=\"ez-toc-section\" id=\"Default_Values\"><\/span>Default Values<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There\u2019s one more point to note about <code>useState()<\/code>. The hook itself accepts a parameter which sets the initial value of the state variable. In the example above, the <code>value<\/code> will be initialised to <code>1<\/code>. When you don\u2019t specify a value, <code>undefined<\/code> is used. This matches the behaviour when setting up the <code>state<\/code> instance property in a class component.<\/p>\n<p>If you pass a function to <code>useState()<\/code>, React will call it and use its return value as the initial state value.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> MyComponent <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">const<\/span> initialState <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>value<span class=\"sy0\">,<\/span> setValue<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span>initialState<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This technique enables \u201clazy\u201d state initialisation. The function won\u2019t be called until React is actually ready to setup the state.<\/p>\n<p>Using a function also ensures the initial state value only gets computed once. This is important if determining your initial state requires an expensive computation \u2013 if you pass it directly, then the value will be computed every time the component renders, compared with once on first render if you pass a reference to a function.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> MyComponent <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">const<\/span> doSomethingExpensive <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"co1\">\/\/ ...<\/span>\n    <span class=\"br0\">}<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>value<span class=\"sy0\">,<\/span> setValue<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span>doSomethingExpensive<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>value<span class=\"sy0\">,<\/span> setValue<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span>doSomethingExpensive<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The subtle but significant difference in the two <code>useState()<\/code> calls illustrates the potential performance improvement. The first line would perform the expensive operation on every render call, even if it was redundant because the state was already initialised. This wouldn\u2019t occur in the second case.<\/p>\n<h2 id=\"using-multiple-state-values\"><span class=\"ez-toc-section\" id=\"Using_Multiple_State_Values\"><\/span>Using Multiple State Values<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You have a couple of choices when using multiple state values in a single functional component. You could revert to a class-like system, using a single object stored in state:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> MyComponent <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>user<span class=\"sy0\">,<\/span> setUser<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>id<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> username<span class=\"sy0\">:<\/span> <span class=\"st0\">\"foobar\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>You\u2019d need to make sure you call <code>setUser()<\/code> with the updated user <em>object<\/em>. The spread syntax comes in handy in the same way as class components:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\">setUser<span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>...<span class=\"me1\">user<\/span><span class=\"sy0\">,<\/span> username<span class=\"sy0\">:<\/span> <span class=\"st0\">\"example\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This creates a new object with the existing properties of <code>user<\/code>. It then updates the <code>username<\/code> property to its new value. It\u2019s important you create a <em>new<\/em> object, instead of directly mutating the existing object, so React\u2019s state reconciliation can identify the change.<\/p>\n<p>Alternatively, you can call <code>useState()<\/code> multiple times to set up unique state variables for each item. This is often the preferred approach for functional components. It can make it easier to update individual state values.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> MyComponent <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>userId<span class=\"sy0\">,<\/span> setUserId<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"nu0\">1<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>username<span class=\"sy0\">,<\/span> setUsername<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"foobar\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The stateful properties now have their own state variables and update functions.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React\u2019s <code>useState()<\/code> hook makes functional components more powerful by allowing them to possess state. You can set an initial value, access the current value with an assurance it\u2019ll persist between re-renders, and update the state using a specially provided function.<\/p>\n<p>Stateful functional components are often quicker to write than their class-based counterparts. Moreover, they can make it more obvious what\u2019s going on in your codebase as the references to <code>state<\/code> and <code>setState()<\/code> are eliminated in favour of clear variable names. Ultimately, <code>useState()<\/code> provides flexibility and means you no longer need to convert functional components to class components the moment you require state.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/10021\/how-to-use-state-in-functional-react-components\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Use State in Functional React Components \u2013 CloudSavvy IT&#8221; React components can possess internal \u201cstate,\u201d a set of key-value pairs which belong to the component. When the state changes, React re-renders the component. Historically, state could only be used in class components. Using hooks, you can apply state to functional components too. The&#8230;<\/p>\n","protected":false},"author":1,"featured_media":215540,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-215539","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/215539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=215539"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/215539\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/215540"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=215539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=215539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=215539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}