State, derivation and reducers

What state is

State = a component's memory: data that changes over time because of interaction (an input, a toggle, a counter). When the state changes, React re-renders the component with the new value.

Why not a plain variable? A local variable (let count = 0) resets on every render, and changing it doesn't trigger any screen update.

const [count, setCount] = useState(0)

Props vs state

How the setter works

setCount(count + 1)        // a new value
setCount(c => c + 1)       // an updater — receives the most recent value

• The setter does not change the variable immediately; it schedules a new render. A console.log(count) right after it shows the old value.
• React groups several updates (batching) into a single render.
• When the new value depends on the old one → an updater function: setCount(c => c + 1) 3 times gives +3; setCount(count + 1) 3 times gives +1.

State is immutable

React compares the old state with the new one by reference. You replace objects and arrays, you don't change them — see References and immutability.

setUser({ ...user, name })                       // ✓
setTodos(todos => [...todos, newTodo])           // ✓
user.name = name; setUser(user)                  // ✗ the same reference → no re-render

Derived state — don't store it

If a value can be computed from props or state, compute it while rendering. Don't keep it in another useState.

// ✗ two sources of truth + an effect that syncs them
const [todos, setTodos] = useState([])
const [doneCount, setDoneCount] = useState(0)

// ✓ a single source, the rest derived
const doneCount = todos.filter(t => t.done).length

Truly expensive calculations → useMemo (or the React Compiler, which memoizes automatically).

Where to keep state — kinds and when

The rule: as low as possible, lift it only when needed.

useReducer — when the logic grows

When a piece of state has many ways to change, you centralize the logic in a reducer — a pure function (state, action) => newState:

function todosReducer(state, action) {
  switch (action.type) {
    case 'add': return [...state, action.todo]
    case 'toggle': return state.map(t => (t.id === action.id ? { ...t, done: !t.done } : t))
    case 'remove': return state.filter(t => t.id !== action.id)
    default: return state
  }
}

const [todos, dispatch] = useReducer(todosReducer, [])
dispatch({ type: 'add', todo })

Summary

• State = the component's memory; the setter asks for a re-render.
• An updater function when you depend on the old value; always new objects.
• Derive what you can compute; keep state as low as possible; the URL for what has to be shared.

Official sources

• react.dev — State: A Component's Memory
• react.dev — Choosing the State Structure
• react.dev — Sharing State Between Components
• react.dev — Extracting State Logic into a Reducer