Skip to main content

Managing State

Patterns for sharing and organizing state as applications grow.

Official docs

Mirrors Managing State — react.dev.

When to Use Local State​

Keep state as close as possible to where it's used. Lift state up only when multiple components need the same data.

Sharing State Between Components​

  1. Move shared state to the closest common parent
  2. Pass state down via props
  3. Pass event handlers down to update state

Reducer Pattern​

For complex state logic, useReducer keeps updates predictable:

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
}

Context for Deep Trees​

Use Context when many components need the same data without prop drilling — but don't overuse it.

Further Reading​