Rendering Model

Last updated: 2026-11-02

Rendering Model Rendering Model

React updates in two steps: it first runs your component function to produce new JSX (render), then it commits the differences against the previous result to the real DOM (commit). The triggers include state updates, changes in a subscribed Context, and a parent component re-rendering. Understanding this two-phase model makes most re-render questions easy to answer, and it explains why a render alone may leave the DOM untouched.

Group	Core Concepts
Kind	Pattern
Since	Earliest React versions

ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.

📝 Syntax

Trigger an update (setState / changed props / parent re-render)
  → Render: run the component function to get the new JSX (virtual DOM)
  → Commit: apply the differences against the previous result to the real DOM
  // Note: render ≠ touching the DOM; the render phase never reads or writes the page

Returns：No return value — a coding convention and mental model.

▶ Example

The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.

Output：

The page shows the parent count and the child text; every button click bumps both numbers, and the console prints render logs for parent and child — the two-step model of "re-run the function, then commit the diff".

▶ Try it

💡 Key Points

ℹ️ Info "Rendering" means re-running the component function, not that the page changed: after a render with no differences, not a single byte of the DOM moves.

⚠️ Warning Component functions must be pure: no requests, no mutation of outer variables and no DOM writes during the render phase — put those side effects in useEffect.

💡 Tip The Profiler panel in DevTools shows which components rendered in each commit and how long it took.

More case studies coming soon.

📚 Related Tutorials

useState Basics

Lesson 6: the minimal loop that starts from a state update triggering a render.

❓ FAQ

Q When does React re-render a component?

A When its own state changes, when a subscribed Context changes, when its props change, and when the parent re-renders — by default a parent render makes every child render as well.

Q Does a child always render when the parent updates?

A Its function runs by default, but a child wrapped in memo skips that render when the prop references stay the same.

Q What is the difference between render and commit?

A Render is the phase that runs your component function and computes new JSX; it can be interrupted and re-run. Commit is the phase that writes the differences into the DOM, and that is where the page actually changes.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

Rendering Model

Rendering Model Rendering Model

📝 Syntax

▶ Example

💡 Key Points

🏷️ More Core Concepts

💡 Related Cases

📚 Related Tutorials

❓ FAQ

🙏 帮我们做得更好