How can I store and update multiple values in React useState?

Storing and updating multiple values in React's useState hook can be achieved in several ways. Below are two common methods for using the useState hook to store and update multiple values:

1. Using Separate useState for Each Value

You can use a separate useState call for each independent state value in the component. This approach is particularly useful when the state values are relatively independent.

jsx
import React, { useState } from 'react';

function MyComponent() {
  // Create a separate `useState` for each state value
  const [age, setAge] = useState(20);
  const [name, setName] = useState('Alice');
  const [email, setEmail] = useState('alice@example.com');

  // Functions to update state
  const handleAgeChange = (newAge) => {
    setAge(newAge);
  };

  const handleNameChange = (newName) => {
    setName(newName);
  };

  const handleEmailChange = (newEmail) => {
    setEmail(newEmail);
  };

  // Rendering and interaction...

  return (
    <div>
      {/* UI rendering and interaction */}
    </div>
  );
}

2. Using a Single useState to Store an Object

When multiple state values are closely related, you can store them as an object and manage them with a single useState hook.

jsx
import React, { useState } from 'react';

function MyComponent() {
  // Store multiple state values as an object
  const [user, setUser] = useState({
    age: 20,
    name: 'Alice',
    email: 'alice@example.com'
  });

  // Update individual fields in the state object
  const handleAgeChange = (newAge) => {
    setUser(prevUser => ({
      ...prevUser,
      age: newAge
    }));
  };

  const handleNameChange = (newName) => {
    setUser(prevUser => ({
      ...prevUser,
      name: newName
    }));
  };

  const handleEmailChange = (newEmail) => {
    setUser(prevUser => ({
      ...prevUser,
      email: newEmail
    }));
  };

  // Rendering and interaction...

  return (
    <div>
      {/* UI rendering and interaction */}
    </div>
  );
}

In this method, when updating the state, you must use the spread operator (...) to ensure that other state values remain unchanged. This approach is more suitable for scenarios where multiple state values frequently change together.

Important Notes

When using the second method, it's crucial to provide the complete state object during updates because useState does not automatically merge objects like this.setState in class components. If not all properties are specified, unspecified properties will be overwritten with undefined, potentially leading to data loss.

In summary, the choice of method depends on your specific requirements, preferences, and the interdependence of the state values.