Learn How to Use React useState Hook

Learn How to Use React `useState` Hook

The useState hook is one of the most fundamental and widely used hooks in React. It allows you to add state to functional components, which was previously only possible in class components. With the useState hook, you can easily manage dynamic values in a component, which makes React more powerful and flexible for handling user interactions and data updates.

Below is an explanation of how to use the useState hook effectively, along with an optimized example.

What is the `useState` Hook?

The useState hook is used to declare state variables in functional components. It returns two things:

State Variable: This holds the current state value.
State Setter Function: A function that allows you to update the state.

Syntax of useState Hook:
```
const [state, setState] = useState(initialValue);
```
- state: The current state value.
- setState: A function that updates the state.
- initialValue: The value that the state will be initialized with.
How does useState work?
- When you call useState, it initializes the state with the provided initialValue.
- Whenever the state changes (i.e., when you call setState), the component re-renders with the new state.
- You can use the state variable to display values in the UI and use the state setter function to update the state based on user actions or events.
Basic Example:

Here’s a simple example where we use the useState hook to create a counter:

App.js:
```
import React, { useState } from 'react';

function App() {
  // Declare a state variable named 'count' and initialize it with 0
  const [count, setCount] = useState(0);

  // Function to increment the count
  const incrementCount = () => {
    setCount(count + 1); // Update the state with the incremented value
  };

  // Function to decrement the count
  const decrementCount = () => {
    setCount(count - 1); // Update the state with the decremented value
  };

  return (
    <div>
      <h1>React useState Hook Example</h1>
      <p>Current Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
    </div>
  );
}

export default App;
```
How Does useState Trigger Re-renders?

React components re-render automatically whenever the state is updated. In the example above:
- When the user clicks the “Increment” button, the incrementCount function is called, and setCount is invoked with a new value. React then re-renders the component to reflect the updated count.
- React handles the DOM updates efficiently, only changing the parts of the UI that are affected by the state change.

Learn How to Use React useState Hook