React Foundations

React is often learned by memorising APIs—how to call useState, what useEffect’s dependency array does, and when to wrap a component in React.memo. Surface knowledge is enough to build simple UIs, but it collapses under the weight of real production work. The Foundations section replaces memorisation with mechanical understanding. It explains how React actually works.

This section is not an API reference and not a tutorial. It builds the mental models that experienced engineers rely on to debug re-renders, design performant component trees, and reason accurately about asynchronous effects and state. When you finish Foundations, you will read React code not as a set of instructions, but as a predictable system you can trace from component to pixel.

Why React Foundations Matter

Understanding React’s internals is not academic. It is the difference between guessing and knowing. Engineers who invest in foundations gain specific advantages:

• Debug faster – Instead of scattering console.log and hoping, you trace state and re-renders back to the reconciliation trigger.
• Write cleaner components – You stop working around React and start working with its scheduling, batching, and commit cycle.
• Improve performance deliberately – You know what causes re-renders, why React.memo works, and when to avoid premature optimisation.
• Understand Hooks correctly – You master the call order rules, closure captures, and effect timing by seeing how React stores and invokes hooks internally.
• Design scalable applications – The rendering and data flow models you learn here become the blueprint for architecture decisions later.
• Prepare for senior engineering interviews – React internals questions are common; the ability to explain reconciliation, Fiber, and the render-commit phase signals deep competence.

Foundations is the highest-leverage section in the handbook. Every subsequent section—Architecture, Patterns, Production—assumes you have this mechanical understanding. Skip it, and you will apply patterns blindly without knowing why they work or when they fail.

What You Will Learn

The articles in this section are ordered to construct a coherent mental model. You will build from a single component’s mental representation to the full rendering pipeline:

• The React mental model – thinking declaratively, component identity, and the relationship between state, props, and UI output
• How rendering is triggered, scheduled, and committed to the DOM
• The reconciliation algorithm that updates the UI efficiently
• The Virtual DOM and its role in diffing real DOM nodes
• What happens when JSX is compiled and how it becomes JavaScript
• The precise mechanics of state and props, including batching and updates
• The modern component lifecycle and how effects integrate into it
• Why Hooks exist, how they are stored, and the call-order constraints
• The useEffect timing model, dependency arrays, and stale closures
• How React’s event system wraps native events and batches updates
• The Fiber architecture and how it enables concurrent features
• Root causes of re-renders and how to trace them
• Closures in Hooks – the most persistent source of subtle bugs
• The Context API and its re-render propagation behaviour
• The render vs commit phase separation and what can happen in each

Every concept is presented with minimal, focused examples that you can experiment with in your own environment.

Recommended Reading Order

Foundations is designed to be read sequentially. Each article introduces a single mechanism, and the next depends on the one before it. The recommended path is:

1. React Mental Model: Thinking in Components – The declarative mindset and component identity.
2. How React Rendering Really Works – Triggering and executing renders at the framework level.
3. React Reconciliation Explained – How React decides what to update and why keys matter.
4. Virtual DOM vs Real DOM Explained – The abstraction that makes reconciliation fast.
5. JSX Compilation and Transformation Process – From angle brackets to React.createElement.
6. State and Props Deep Dive – Update semantics, batching, and the unidirectional data flow guarantee.
7. Modern React Component Lifecycle – Mount, update, unmount phases and the role of effects.
8. Hooks Mental Model: Why Hooks Exist – The problem Hooks solve and the linked-list backing model.
9. useEffect Explained: Dependency and Timing Model – Execution order, cleanup, and closure traps.
10. React Event System Explained – Synthetic events, delegation, and automatic batching.
11. React Fiber Architecture Overview – How work is scheduled and why React can interrupt rendering.
12. Why React Re-renders: Root Causes – State, props, context, and parent re-renders; how to trace each.
13. Closures in React Hooks Explained – Why stale values appear and how to fix them without lying to dependencies.
14. Context API Deep Understanding – Propagation, memoisation, and splitting context for performance.
15. Render vs Commit Phase in React – What effects can do, what the commit phase guarantees, and why it matters for concurrent mode.

Resist the temptation to jump ahead. If an article feels abstract, code the examples until the mechanism becomes tangible.

Article Overview

Article	What You Will Learn
React Mental Model: Thinking in Components	How to see UIs as declarative component trees where state drives output, not imperative DOM mutations.
How React Rendering Really Works	The conditions that trigger a render, the rendering process, and how React decides whether to commit changes.
React Reconciliation Explained	The diffing algorithm, the role of element type and keys, and why reconciliation is the core of React’s predictability.
Virtual DOM vs Real DOM Explained	What the Virtual DOM is, how it minimises real DOM operations, and its place in the render pipeline.
JSX Compilation and Transformation Process	How JSX tags become JavaScript function calls and why that transformation matters for component design and linting.
State and Props Deep Dive	The semantics of state updates, batching behaviour, prop immutability, and how data flows down the component tree.
Modern React Component Lifecycle	The three lifecycle phases—mount, update, unmount—and how effects and class lifecycle methods map to them.
Hooks Mental Model: Why Hooks Exist	The motivation behind Hooks, the call-order constraint, and how React stores state between renders.
useEffect Explained: Dependency and Timing Model	When effects run, how cleanup works, how to specify dependencies accurately, and the stale closure problem.
React Event System Explained	Synthetic events, event delegation, and how React’s event system interacts with state batching.
React Fiber Architecture Overview	The Fiber node structure, work loop, and how scheduling enables time-slicing and concurrent rendering.
Why React Re-renders: Root Causes	A catalogue of re-render triggers—state change, parent render, context change, and hooks—with tracing strategies.
Closures in React Hooks Explained	Why closures capture stale values, how the dependency array relates to closures, and how to avoid the most common hooks bugs.
Context API Deep Understanding	How context value changes propagate, why consumers re-render even if props didn’t change, and how to split context.
Render vs Commit Phase in React	The two-phase execution model, what side effects are safe in each phase, and how concurrent features rely on this separation.

Who Should Read This Section

Foundations is the core of the handbook and is essential for every engineer who will build, maintain, or debug React applications in a professional setting. It is recommended for:

• React beginners immediately after completing the Getting Started section
• Frontend engineers with React experience who want to fill gaps in their internal model
• Full-stack developers who need to understand the framework rather than just use it
• Backend engineers transitioning to the frontend and seeking a systematic mental model
• Engineers preparing for senior-level interviews where React internals are examined
• Senior frontend engineers reviewing the mechanics that underpin performance and architecture decisions

If you have already built production React applications but have never traced a re-render to its root or explained the difference between the render and commit phases, this section will significantly upgrade your effectiveness.

Before Moving to Architecture

Once you understand how React schedules work, reconciles component trees, and executes hooks, you are ready to zoom out. The Architecture section takes the component-level mechanics you have mastered and applies them to application-level design.

In Architecture, you will learn:

• How to structure a production React project so that it scales across features and teams
• Component architecture principles, including atomic design and feature-based organisation
• State architecture: combining local state, context, and external stores into a coherent strategy
• Data flow patterns, API layers, and async state management
• Routing and navigation design for large applications
• Design system integration and component library strategy

Architecture assumes you can reason about rendering and re-rendering without effort. That foundation makes architectural trade-offs clear instead of arbitrary.

Key Takeaways

• Learn principles, not API signatures. React’s behaviour is determined by mechanics that persist across versions.
• Build a strong mental model of rendering and reconciliation before attempting performance optimisation.
• Master Hooks by understanding React’s execution model—call order, state storage, and closure semantics.
• Understand re-render causes before applying React.memo or useMemo.
• A solid foundation in React internals makes architecture decisions, pattern selection, and production debugging significantly easier.