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.