Using the useState Hook in React

In React 17 and higher, function components have become the dominant development pattern. As the official Hooks API, useState is the most fundamental and powerful tool for managing local state. Unlike this.state in traditional class components, useState allows developers to define and update component state in a declarative manner, resulting in cleaner code logic and better maintainability.

The core mechanism of useState lies in its return value: an array containing two elements—the initial state value and a function used to trigger state updates (often referred to as the "setter" function). When this update function is called, React detects the change and re-renders the component, but it does not immediately execute side-effect logic. Instead, it queues the state change record. This non-blocking update mechanism is the foundation for React's efficient virtual DOM diffing algorithm.
The basic syntax for using useState is very simple; you only need to pass the initial value as an argument:

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Count is {count}
    </button>
  );
}

In the example above, useState(0) returns an array of length 2. The first element, count, is the current state value (initially the number 0), and the second element, setCount, is a function that accepts a new value. Calling setCount(n) does not directly modify the value of count; instead, it passes the new numeric value to React for comparison and updating.

It is worth noting that if the initial value is an object or an array, React performs a deep copy of it to avoid unnecessary reference check overhead:

const [items, setItems] = useState([1, 2, 3]); // items: array<number>, setItems: function(items)
// At this point, internally stored is a copy of [1, 2, 3], not the original array reference

Advanced Techniques for State Updates

In actual development, we often need to generate new values based on complex logic involving the current state. useState provides several ways to handle such scenarios:

• Function-form Setter: If the initial value is an object or an array, or if we need to calculate a new value based on the old one, define setCount as a function accepting two parameters (prev, newValue).

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

// Increment based on current count + 1
function increment() {
  setCount((current) => current + 1); 
}

// Pass new value directly (suitable for simple scenarios)
setCount(current => current * 2); 

// Incorrect demonstration: Using an arrow function directly as an argument loses 'this' context and cannot access external variables

• Batched Updates: React merges multiple state updates into a single render. This means that even if you call setState (in class components) consecutively within the same event handler, they will execute in order but trigger only one re-render.

let count = 0;
setCount(1); // React queue: [count -> 1]
setCount((c) => c + 2); // React queue: [count -> 3, prev=1]
// Finally, when rendering, count becomes 3

• Dependency Warnings: If the initialization value of useState defined inside a function component depends on external variables (such as props), ensure that the reference of these variables remains consistent every time they are called. Otherwise, React may issue a warning: "React will treat the new value as identical to the old one if it is a plain object or array."

Common Pitfalls and Best Practices

Although useState is powerful, there are still several common misconceptions to avoid in actual usage:

• Do not assign directly to state

  // ❌ Incorrect approach
  setCount(count = count + 1); 
  
  // ✅ Correct approach
  setCount(prev => prev + 1); 
  

  React does not execute the expression inside the arrow function; it only passes the result as an argument to the setter.

• Avoid accessing external variables directly in callbacks
  If you use a value captured by an old closure in an onClick event, it leads to logical errors:

  const [count, setCount] = useState(0);
  
  // ❌ Each click will use the same old count reference (unless React recreates the function during rendering)
  function handleClick() { 
    console.log(count + 1); // May output an incorrect value
    setCount(count + 1); 
  }
  
  // ✅ Recommended approach: Use arrow functions or Immediately Invoked Function Expressions (IIFE)
  const handleClick = () => {
      setCount(prev => prev + 1);
  };
  
  function Counter() {
      return <button onClick={handleClick}>...</button>;
  }
  

• Do not use useEffect to replace state updates
  Some developers are accustomed to directly modifying state inside useEffect, which is not recommended. Although React allows this (triggering a re-render via dependencies), it goes against the design intent of Hooks, making code difficult to track and debug. Always prioritize using setter functions to manage logic flow.

Summary and Outlook

useState is an indispensable cornerstone for building modern React applications. By decoupling state management from component lifecycles, it significantly boosts development efficiency. Mastering its basic usage, understanding return value characteristics, and avoiding common pitfalls will help developers write more robust reactive code. As the React ecosystem evolves, there may be more advanced Hooks (such as useReducer) in the future to handle complex state logic. However, for the vast majority of application scenarios, useState remains the preferred solution.