React - How to implement useState hook in your application
Tags: webdev, javascript, beginners, programming
Published: 2023-02-09 09:32:23

The useState hook is a built-in hook in React that allows you to add state to your functional components. Here is how you can use the useState hook in your React code:

<pre>
 <code id="htmlViewer" style="color:rgb(255, 255, 255); font-weight:400;background-color:rgb(51, 51, 51);background:rgb(51, 51, 51);display:block;padding: .5em;"><span style="color:rgb(252, 194, 140); font-weight:400;">import</span> <span class="hljs-title class_">React</span>, { useState } <span style="color:rgb(252, 194, 140); font-weight:400;">from</span> <span style="color:rgb(162, 252, 162); font-weight:400;">&#x27;react&#x27;</span>;

<span style="color:rgb(252, 194, 140); font-weight:400;">function</span> <span class="hljs-title function_">Example</span>(<span style="color:rgb(255, 255, 255); font-weight:400;"></span>) {
  <span style="color:rgb(252, 194, 140); font-weight:400;">const</span> [count, setCount] = <span class="hljs-title function_">useState</span>(<span style="color:rgb(211, 99, 99); font-weight:400;">0</span>);

  <span style="color:rgb(252, 194, 140); font-weight:400;">return</span> (
    <span style="color:rgb(255, 255, 255); font-weight:400;"><span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">p</span>&gt;</span>You clicked {count} times<span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span style="color:rgb(162, 252, 162); font-weight:400;">{()</span> =&gt;</span> setCount(count + 1)}&gt;
        Click me
      <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  );
}
</code></pre>

In the code above, we imported the useState hook from the react library and then used it inside the Example component. The useState hook takes an initial state value as an argument, and returns an array containing the current state value and a state update function.

In this example, we initialized the state value with 0 and named it count. The setCount function is used to update the count value. Every time the button is clicked, the setCount function is called with the updated count value.

This is a basic example of how you can use the useState hook in your React components to manage state. You can also use the useState hook to manage more complex state objects and arrays. The idea is the same, you just need to pass the initial state value and use the update function to change the state as needed.

## **General Use Cases**

**Managing input values in a form**

<pre>
 <code id="htmlViewer" style="color:rgb(255, 255, 255); font-weight:400;background-color:rgb(51, 51, 51);background:rgb(51, 51, 51);display:block;padding: .5em;"><span style="color:rgb(252, 194, 140); font-weight:400;">import</span> <span class="hljs-title class_">React</span>, { useState } <span style="color:rgb(252, 194, 140); font-weight:400;">from</span> <span style="color:rgb(162, 252, 162); font-weight:400;">&#x27;react&#x27;</span>;

<span style="color:rgb(252, 194, 140); font-weight:400;">function</span> <span class="hljs-title function_">FormExample</span>(<span style="color:rgb(255, 255, 255); font-weight:400;"></span>) {
  <span style="color:rgb(252, 194, 140); font-weight:400;">const</span> [inputValue, setInputValue] = <span class="hljs-title function_">useState</span>(<span style="color:rgb(162, 252, 162); font-weight:400;">&quot;&quot;</span>);

  <span style="color:rgb(252, 194, 140); font-weight:400;">const</span> <span class="hljs-title function_">handleChange</span> = event =&gt; {
    <span class="hljs-title function_">setInputValue</span>(event.<span style="color:rgb(255, 255, 255); font-weight:400;">target</span>.<span style="color:rgb(255, 255, 255); font-weight:400;">value</span>);
  };

  <span style="color:rgb(252, 194, 140); font-weight:400;">return</span> (
    <span style="color:rgb(255, 255, 255); font-weight:400;"><span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">form</span>&gt;</span>
      <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span style="color:rgb(162, 252, 162); font-weight:400;">&quot;text&quot;</span> <span class="hljs-attr">value</span>=<span style="color:rgb(162, 252, 162); font-weight:400;">{inputValue}</span> <span class="hljs-attr">onChange</span>=<span style="color:rgb(162, 252, 162); font-weight:400;">{handleChange}</span> /&gt;</span>
      <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">p</span>&gt;</span>Entered value: {inputValue}<span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">form</span>&gt;</span></span>
  );
}
</code></pre>

In this example, we are using the useState hook to manage the value of an input field in a form. We initialized the state with an empty string and named it inputValue. The handleChange function is used to update the inputValue state whenever the input value changes.

**Managing a toggle state**

<pre>
 <code id="htmlViewer" style="color:rgb(255, 255, 255); font-weight:400;background-color:rgb(51, 51, 51);background:rgb(51, 51, 51);display:block;padding: .5em;"><span style="color:rgb(252, 194, 140); font-weight:400;">import</span> <span class="hljs-title class_">React</span>, { useState } <span style="color:rgb(252, 194, 140); font-weight:400;">from</span> <span style="color:rgb(162, 252, 162); font-weight:400;">&#x27;react&#x27;</span>;

<span style="color:rgb(252, 194, 140); font-weight:400;">function</span> <span class="hljs-title function_">ToggleExample</span>(<span style="color:rgb(255, 255, 255); font-weight:400;"></span>) {
  <span style="color:rgb(252, 194, 140); font-weight:400;">const</span> [toggle, setToggle] = <span class="hljs-title function_">useState</span>(<span style="color:rgb(252, 194, 140); font-weight:400;">false</span>);

  <span style="color:rgb(252, 194, 140); font-weight:400;">return</span> (
    <span style="color:rgb(255, 255, 255); font-weight:400;"><span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">p</span>&gt;</span>Toggle is {toggle ? &quot;ON&quot; : &quot;OFF&quot;}<span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span style="color:rgb(162, 252, 162); font-weight:400;">{()</span> =&gt;</span> setToggle(!toggle)}&gt;Toggle<span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  );
}
</code></pre>

In this example, we are using the useState hook to manage a toggle state. We initialized the state with false and named it toggle. The setToggle function is used to update the toggle state whenever the button is clicked.

**Managing a list of items**

<pre>
 <code id="htmlViewer" style="color:rgb(255, 255, 255); font-weight:400;background-color:rgb(51, 51, 51);background:rgb(51, 51, 51);display:block;padding: .5em;"><span style="color:rgb(252, 194, 140); font-weight:400;">import</span> <span class="hljs-title class_">React</span>, { useState } <span style="color:rgb(252, 194, 140); font-weight:400;">from</span> <span style="color:rgb(162, 252, 162); font-weight:400;">&#x27;react&#x27;</span>;

<span style="color:rgb(252, 194, 140); font-weight:400;">function</span> <span class="hljs-title function_">ListExample</span>(<span style="color:rgb(255, 255, 255); font-weight:400;"></span>) {
  <span style="color:rgb(252, 194, 140); font-weight:400;">const</span> [items, setItems] = <span class="hljs-title function_">useState</span>([
    { <span style="color:rgb(255, 255, 255); font-weight:400;">id</span>: <span style="color:rgb(211, 99, 99); font-weight:400;">1</span>, <span style="color:rgb(255, 255, 255); font-weight:400;">text</span>: <span style="color:rgb(162, 252, 162); font-weight:400;">&quot;Item 1&quot;</span> },
    { <span style="color:rgb(255, 255, 255); font-weight:400;">id</span>: <span style="color:rgb(211, 99, 99); font-weight:400;">2</span>, <span style="color:rgb(255, 255, 255); font-weight:400;">text</span>: <span style="color:rgb(162, 252, 162); font-weight:400;">&quot;Item 2&quot;</span> },
    { <span style="color:rgb(255, 255, 255); font-weight:400;">id</span>: <span style="color:rgb(211, 99, 99); font-weight:400;">3</span>, <span style="color:rgb(255, 255, 255); font-weight:400;">text</span>: <span style="color:rgb(162, 252, 162); font-weight:400;">&quot;Item 3&quot;</span> }
  ]);

  <span style="color:rgb(252, 194, 140); font-weight:400;">const</span> <span class="hljs-title function_">addItem</span> = (<span style="color:rgb(255, 255, 255); font-weight:400;"></span>) =&gt; {
    <span class="hljs-title function_">setItems</span>([...items, { <span style="color:rgb(255, 255, 255); font-weight:400;">id</span>: items.<span style="color:rgb(255, 255, 255); font-weight:400;">length</span> + <span style="color:rgb(211, 99, 99); font-weight:400;">1</span>, <span style="color:rgb(255, 255, 255); font-weight:400;">text</span>: <span style="color:rgb(162, 252, 162); font-weight:400;">`Item <span style="color:rgb(162, 252, 162); font-weight:400;">${items.length + <span style="color:rgb(211, 99, 99); font-weight:400;">1</span>}</span>`</span> }]);
  };

  <span style="color:rgb(252, 194, 140); font-weight:400;">return</span> (
    <span style="color:rgb(255, 255, 255); font-weight:400;"><span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">ul</span>&gt;</span>
        {items.map(item =&gt; (
          <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">li</span> <span style="color:rgb(255, 255, 255); font-weight:400;">key</span>=<span style="color:rgb(162, 252, 162); font-weight:400;">{item.id}</span>&gt;</span>{item.text}<span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">li</span>&gt;</span>
        ))}
      <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">ul</span>&gt;</span>
      <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;<span class="hljs-name">button</span> <span style="color:rgb(255, 255, 255); font-weight:400;">onClick</span>=<span style="color:rgb(162, 252, 162); font-weight:400;">{addItem}</span>&gt;</span>Add item<span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span style="color:rgb(98, 200, 243); font-weight:400;">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  );
}
</code></pre>

In this example, we are using the useState hook to manage a list of items. We initialized the state with an array of objects and named it items. The addItem function is used to add a new item to the items state whenever the button is clicked.

**Hope you guys enjoy reading this article, happy coding 😉**