How to Use Multiple useState Hooks in React Components

In React, you can use multiple useState hooks to manage different pieces of state separately within a component. Each call to useState creates an independent state variable and its setter function, allowing you to update them individually.

Syntax

To use multiple useState hooks, call useState separately for each state variable you want to track. Each call returns an array with the current state value and a function to update it.

Example parts:

• const [state, setState] = useState(initialValue); declares a state variable and its setter.
• Repeat this line for each state variable.

jsx

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0); // first state
  const [name, setName] = useState(''); // second state
  
  return null;
}

Example

This example shows a component with two separate state variables: count and name. You can update each independently using their setter functions.

jsx

import React, { useState } from 'react';

export default function MultipleStates() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>

      <p>Name: {name}</p>
      <input
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Enter your name"
        aria-label="Name input"
      />
    </div>
  );
}

Output

The page shows a number starting at 0 with a button labeled 'Increase Count'. Clicking the button increases the number by 1. Below, there is a text input labeled 'Name input' where typing updates the displayed name in real time.

Common Pitfalls

Common mistakes when using multiple useState include:

• Trying to update multiple states in one setter call (each state has its own setter).
• Overwriting state by using one useState for an object but updating it incorrectly without copying previous values.
• Not initializing state properly, causing unexpected behavior.

Always call each useState separately and update states individually.

jsx

import React, { useState } from 'react';

function WrongExample() {
  // Incorrect: single state object without copying previous state
  const [state, setState] = useState({ count: 0, name: '' });

  function updateCount() {
    // This overwrites 'name' because it does not copy previous state
    setState({ count: state.count + 1 });
  }

  return null;
}

function RightExample() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  function updateCount() {
    setCount(count + 1); // updates only count
  }

  return null;
}

Quick Reference

Tips for using multiple useState hooks:

• Use one useState per independent piece of state.
• Update each state with its own setter function.
• Keep state simple and focused for easier updates and debugging.
• Use descriptive names for state variables and setters.

Key Takeaways

Use multiple useState hooks to manage separate state variables independently.

Each useState call returns a state value and a setter function to update it.

Avoid combining unrelated state in one object unless necessary and update carefully.

Name state variables and setters clearly for easy understanding.

Update state only through its own setter function to prevent bugs.