Why does React's useState return an array instead of an object?

React is one of the most popular JavaScript libraries in the front-end world, providing a simple yet powerful way to build user interfaces. In React, we often use useState to manage the state of components. However, you may be wondering why useState returns an array instead of an object. This article will delve into this issue.

Introduction to useState

In React, useState is a Hook that allows us to add state to functional components. Using it, we can easily track component changes and re-render components when their state updates. Typically, useState is used as follows:

import React, { useState } from 'react';

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

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

In this example, we use useState to create a state variable named count and provide a function setCount that updates the state.

Why is an array returned?

You may find it more intuitive to return an object, such as { count, setCount }. Why does React choose to return an array?

1. Flexibility

Returning an array allows us to give custom names to variables. If we use objects, then we can only use specific property names. This limits our freedom because we can't choose variable names arbitrarily.

const [count, setCount] = useState(0); // 数组
const { count, setCount } = useState(0); // 对象（不合法）

2. Reduce refactoring costs

Suppose the React development team decides to change the return value of useState in the future. If the object is returned from the beginning, then this change will break all code that uses useState. And if an array is returned, React can easily modify the internal implementation of the Hook without breaking the existing code.

3. Consistent with array destructuring

Using array return values ​​is more consistent with destructuring assignment in JavaScript. This makes it easier for newbies to understand and learn. When we want to get multiple states from Hook, we only need to deconstruct it as an array.

const [count, setCount] = useState(0);
const [name, setName] = useState('John');

4. Type inference

The method of returning an array is more friendly to type systems such as TypeScript. It makes type inference easier.

Summarize

Although sometimes we may prefer the object form, React's design chose to return an array for flexibility, maintainability, and consistency. Understanding this, we can make better use of React's Hook mechanism to build more maintainable and clear components. Although useState returns an array, its use is very intuitive and convenient, and it is a powerful tool for React functional component state management.