React - How to implement useState hook in your application

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:

 import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

 import React, { useState } from 'react';

function FormExample() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = event => {
    setInputValue(event.target.value);
  };

  return (
    <form>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Entered value: {inputValue}</p>
    </form>
  );
}

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

 import React, { useState } from 'react';

function ToggleExample() {
  const [toggle, setToggle] = useState(false);

  return (
    <div>
      <p>Toggle is {toggle ? "ON" : "OFF"}</p>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
}

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

 import React, { useState } from 'react';

function ListExample() {
  const [items, setItems] = useState([
    { id: 1, text: "Item 1" },
    { id: 2, text: "Item 2" },
    { id: 3, text: "Item 3" }
  ]);

  const addItem = () => {
    setItems([...items, { id: items.length + 1, text: `Item ${items.length + 1}` }]);
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add item</button>
    </div>
  );
}

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 😉