React Architecture Beyond Components: Understanding Context, Hooks, and Render Phases

Short summary

This article explains why React components sometimes show stale context values or run effects unexpectedly: React can call components multiple times during the render phase before committing. The render phase is a pure dry run, while effects run only after commit. Understanding this separation helps debug tricky lifecycle bugs involving hooks, context propagation, and Concurrent Mode interruptions.

• •React may render components multiple times before committing, causing hooks to see different context values
• •Render phase is pure (no DOM mutations); effects run only after commit
• •Keep render pure, memoize context values, and use useCallback/useMemo to stabilize dependencies

Generated with AI, which can make mistakes.