3-6y

React Rendering and Reconciliation

React keeps a light picture of the UI in memory. When props or state change, React compares the new picture with the old one and updates only the parts that changed.

Analogy

A teacher compares two answer sheets and only corrects the lines that changed instead of rewriting the whole page.

Follow-up questions

Topic practice prompts

What is the difference between rendering and reconciliation in React?

Rendering calculates the next UI tree. Reconciliation compares previous and next trees and decides minimal DOM updates.

  • What role do keys play?
  • Can a component render without a DOM change?
Why are keys important in React lists?

Keys help React track identity between renders so it can reuse the right item and preserve state correctly.

  • When is index acceptable?
  • How can wrong keys break form state?
Cheat sheet

Last-day revision lines

  • Render is calculation, not always DOM work.
  • Commit is when the DOM changes.
  • Parent renders can trigger child renders.
  • Keys matter for lists with change.
Source references
  • React interview questions ebook: context/React interview questions- Ebook.docx
  • React questions PDF: context/ReactJS-Questions-and-answers.pdf
Offline study support

Local resource packs for this topic

2 local packs

Use these local packs when you want broader official-source context without leaving the app.

reactOfficial React mental models

React Core Mental Models

A local digest of the React ideas that most often decide whether your answer sounds modern or outdated.

React.js

Rendering, state updates, re-renders, and explaining React without vague virtual-DOM-only answers.

Open local study pack
reactOfficial React effects and state flow

React Effects and Data Flow

A local study pack for useEffect, shared state, and the difference between side effects and derived data.

React.jsFrontend System Design

Modern React interview rounds that test whether you overuse effects or design state carefully.

Open local study pack
Next step

Related topics to study after this one

React.js3-6y

Hooks, Especially useEffect

Explain hooks clearly and use useEffect only for real side effects.

Simple mode, interview mode, example, pitfalls, and follow-ups are all inside this topic.

hooksuseEffectcleanupstale-closures
Study topic
React.js3-6y

React Performance Toolkit

Measure first, then reduce render surface, expensive work, and bundle cost.

Simple mode, interview mode, example, pitfalls, and follow-ups are all inside this topic.

performancememoizationprofilingbundle
Study topic