In React, we use array destructuring with useState to easily extract and manage state values and their corresponding setter functions.

Why Array Destructuring?

When you call useState, it returns an array containing two elements:

1. The current state value.
2. A function to update the state.

Instead of accessing these values using array indexing (which is not readable), we use array destructuring to assign them meaningful names.

Example Without Destructuring

import React, { useState } from "react";

const App = () => {
  const stateArray = useState(0);
  const count = stateArray[0]; // Current state value
  const setCount = stateArray[1]; // Function to update state

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

export default App;

This works, but it is less readable.

Example With Destructuring (Preferred)

import React, { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0); // Destructuring

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

export default App;

Here’s why array destructuring is useful:

• Readable – count represents the state, setCount is the updater.
• Concise – No need to use indexing like stateArray[0] and stateArray[1].
• Flexible – We can name state variables meaningfully.

Why Not Object Destructuring?

React’s useState returns an array instead of an object because:

1. Order matters – The first item is always the state, and the second is the setter.
2. Minimized bundle size – Arrays are slightly more optimized in JavaScript than objects.
3. Simplicity – Array destructuring makes code clean and consistent.