foundation

State

Manage component memory, update queues, batching, derived values, and reset boundaries.

State is memory a component owns between renders. Updating state schedules a rerender; React batches multiple updates in event handlers for performance. State updates are asynchronous relative to the current render — reading state immediately after `setState` still shows the old value.

Prefer minimal state: derive values during render when possible instead of storing duplicates. Functional updaters `(prev) => next` are required when the next value depends on the previous queued update. Reset state by changing a component `key` or passing fresh initial state.

					setCount((c) => c + 1);
setCount((c) => c + 1); // adds 2, not 1
				

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

  • Name what each state slice represents.
  • Use functional updates for dependent changes.
  • Avoid mirroring props into state without a reason.