Module Review: Foundations & Hooks

[!NOTE] This module explores the core principles of Foundations & Hooks, deriving solutions from first principles and hardware constraints to build world-class, production-ready expertise.

Congratulations on completing the Foundations & Hooks module! You’ve gone from the basic render cycle to mastering complex state patterns and custom hook composition.

Key Takeaways

  1. Rendering ≠ Painting: Rendering is the calculation of changes (Render Phase). Painting is the application of changes (Commit Phase).
  2. Fiber Architecture: React’s internal engine that enables prioritizing updates and pausing work.
  3. Hooks Rules: Only call hooks at the top level of function components. Never in loops or conditions.
  4. useEffect vs useLayoutEffect: Use useEffect for 99% of cases. Use useLayoutEffect only for synchronous DOM measurements to prevent flicker.
  5. Composition: Custom hooks allow you to extract and reuse stateful logic, making components cleaner and more testable.

Interactive Flashcards

Test your knowledge by flipping these cards.

What is the Render Phase?

The pure computation phase where React calls components, creates the Virtual DOM, and calculates diffs. No side effects allowed.

What is the Commit Phase?

The synchronous phase where React applies changes to the DOM and runs layout effects. This is when the user sees updates.

What is React Fiber?

React's reconciliation engine (since v16) that allows splitting work into chunks, prioritizing updates, and pausing rendering.

What triggers a re-render?

1. State changes (`useState`, `useReducer`) 2. Parent re-renders 3. Context value changes

When does `useEffect` run?

It runs asynchronously after the browser has painted the screen.

Why `useRef`?

To persist values across renders without triggering a re-render (like DOM references or mutable variables).

Hooks Cheat Sheet

Hook Purpose When it runs
useState Local state management Triggered by setter
useReducer Complex state logic Triggered by dispatch
useEffect Side effects (API, subs) After paint (Async)
useLayoutEffect DOM measurements Before paint (Sync)
useContext Consume context On Provider update
useRef Mutable ref (no re-render) Init once
useMemo Cache expensive calculation On dep change
useCallback Cache function definition On dep change

Quick Revision

  • Render vs. Paint: Render Phase calculates changes; Commit Phase applies them.
  • Fiber Engine: Allows React to pause, prioritize, and split rendering work.
  • useEffect vs. useLayoutEffect: Use useEffect normally (async after paint); use useLayoutEffect only for sync DOM measurements to prevent flicker.
  • Hooks Rules: Top level only, no loops or conditions.
  • Composition: Extract reusable logic into Custom Hooks.

Next Steps

Now that you understand the foundations, it’s time to dive into how to manage state at scale.

View Full Glossary