Rendering, Reconciliation & Component Identity
Understand render versus commit, reconciliation, keys, state preservation, conditional trees, batching, and why React can render without changing the DOM.
Render Phase vs Commit Phase
React's work can be understood in two conceptual phases. During rendering, React calls components and calculates the next UI tree. During commit, React applies the necessary host-environment changes and runs relevant lifecycle behavior.
A render does not mean the DOM necessarily changed. React may calculate a new tree that produces no host mutations, or a render may be abandoned before commit in concurrent rendering scenarios.
This distinction matters when debugging performance. Seeing a component render is not equivalent to seeing a visible DOM update.
- Render calculates; commit applies host changes.
- A render can occur without a visible DOM mutation.
- Concurrent rendering makes render work interruptible in modern React.
Reconciliation & Tree Comparison
Reconciliation is React's process of determining how the next element tree relates to the previous tree. React uses element type and key identity to make decisions about preserving or replacing subtrees.
If an element's type changes, React generally treats it as a different conceptual element. If the type and identity remain compatible, state can often be preserved.
You should not try to memorize every internal heuristic. Instead, learn the practical identity rules: component type, position, and keys affect whether state is preserved or reset.
function Editor({ documentId }) {
return <DocumentEditor key={documentId} documentId={documentId} />;
}- Identity determines state preservation.
- Keys can intentionally reset a subtree.
- Do not assume every render recreates DOM nodes.
State Preservation & Resetting
React state belongs to a component's position and identity in the rendered tree. Moving, replacing, or keying a component differently can change whether state is preserved.
This is why conditional rendering can produce surprising state behavior. Two different conceptual screens should not necessarily share a component identity just because they occupy the same position.
Keys are useful beyond lists. A form can use a user ID as a key to reset local state when switching between users.
- State is associated with component identity in the tree.
- Changing keys is an explicit reset mechanism.
- Model screen identity deliberately when local state matters.
Automatic Batching & Update Scheduling
React can batch multiple state updates so that related changes are processed together. Batching reduces unnecessary work and gives React freedom to schedule updates efficiently.
Do not write code that depends on an immediate DOM update after calling a state setter. If you need the next state for another calculation, use the value you already know or a functional updater. If you need to observe the committed UI, use the appropriate effect or DOM mechanism.
Update scheduling is an implementation detail you should respect rather than circumvent with arbitrary delays.
- State updates are scheduled, not immediate mutations.
- Batching reduces redundant rendering work.
- Use explicit lifecycle boundaries instead of timing hacks.
Concurrent Rendering Concepts
Modern React can prepare rendering work without immediately committing it. This enables prioritization and interruption so urgent interactions can remain responsive while less urgent work is prepared.
Concurrency does not mean JavaScript executes two component functions simultaneously on one thread. It means React can work on rendering in a way that is interruptible and schedulable.
This model makes render purity especially important. If rendering performs side effects, React's ability to pause, restart, or abandon work becomes unsafe.
Concurrent rendering is about scheduling and interruptibility of React work, not parallel execution of JavaScript component functions.
- Concurrent rendering requires pure render logic.
- React can prioritize urgent versus non-urgent updates.
- Never rely on a render occurring exactly once.