State

Remember component data with useState and update it without mutation.

更新于 2026年8月13日适用于 React 19.2

State is a component's memory. Updating it asks React to render a new snapshot of the interface.

Declare and update state

Counter.tsx

01import { useState } from "react";
02
03function Counter() {
04  const [count, setCount] = useState(0);
05  return <button onClick={() => setCount((current) => current + 1)}>{count}</button>;
06}

Use the updater form when the next value depends on the previous value. State values inside an event handler belong to that render's snapshot.

Replace objects and arrays

Profile.tsx

01setProfile((current) => ({ ...current, name: "Mina" }));
02setLessons((current) => current.map((item) => item.id === id ? { ...item, complete: true } : item));

Do not mutate existing state and pass it back. Create the next object or array so React can reason about the change.

Keep this

Store only changing render data, treat each render as a snapshot, and replace state rather than mutating it.