State

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

Declare and update state

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

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.