How Rendering Works
You write <BookCard title="Dune" />, and somehow a heading appears on the page. When data changes, the heading updates. Knowing what React actually does between those moments explains most of its rules — and most of its surprising bugs.
The rule
Trigger, render, commit — and render must be pure.
Trigger. Something asks React to update the screen. There are only two reasons: the app is starting (the first render), or some component's state changed.
Render. React calls your component functions. Each returns JSX, a lightweight description of what the screen should look like. When a component renders, the components it returns render too.
Commit. React compares the new description with the previous one and touches the real DOM only where they differ. If a title changed and nothing else did, only that text node is updated.
Because React may call your function whenever it likes, and as often as it needs, the render step must be pure:
- Same props and state in → same JSX out.
- It changes nothing outside itself during render: no editing global variables, no pushing into shared arrays, no network requests.
let seen = [];
function BookCard({ title }) {
seen.push(title); // impure: changes something outside
return <h2>{title}</h2>;
}Render BookCard twice and seen has two entries; render it a hundred times and it has a hundred. The output on screen looks fine, but the program is quietly wrong.
In development, <StrictMode> (which Vite's template wraps around App) deliberately calls each component twice to expose exactly this kind of bug. It does nothing extra in production.
Side effects are still needed — in event handlers (next lessons) or, as a last resort, in effects (a later section). They just do not belong in the render itself.
The shortcut
Treat a component like a recipe card: reading it tells you what the dish looks like, and reading it twice does not cook two dinners. Ask of each line in a component body: "If this ran twice, would anything be different?"
Read the inputs
BookCardreceivestitle. That is its only input.
Drills
Answer fast — trust the rule.
Which two things can trigger a render?
During the render step, what does React do?
Only one book's title changed. What does the commit step change on the page?
Why does Strict Mode call components twice in development?
Remember
- Trigger, render, commit — and render must be pure.
- Ask of each line: "if this ran twice, would anything be different?"
- Trap: changing outside data while rendering; save side effects for handlers or effects.