After this lesson, you will be able to: Understand React's rendering model: virtual DOM, reconciliation, fiber.
Most React bugs come from misunderstanding when components re-render. This lesson is the foundation.
This is a free introductory lesson. No purchase required.
React keeps an in-memory tree of UI elements (the Virtual DOM). On state change, it builds a new tree, diffs against the old, and applies the minimum DOM changes. Result: declarative UI (you describe what; React figures out how) with reasonable performance.
Different element types (div → span) = full subtree rebuild. Same type = compare props, recurse into children. Lists need `key` props so React matches items across renders. Without key, React assumes index-based matching and bugs follow.
Fiber is React 16's rewrite of the reconciler, splits work into small units that can be paused and resumed. Enables Concurrent Mode features: useTransition, useDeferredValue, Suspense for data, automatic batching. You won't touch Fiber directly; understanding it explains why hooks behave the way they do.
Pick the cleanest answer.