The Biggest Misconception About React Reconciliation (Render vs. Paint)

Short summary

The article clarifies that React reconciliation doesn't compare the Virtual DOM to the real browser DOM. Instead, the Render Phase builds a new Virtual DOM tree and diffs it against the previous one purely in JavaScript, flagging changed nodes. The Commit Phase then surgically updates only the flagged real DOM elements. The key insight is that reconciliation controls browser repainting, not JavaScript re-rendering.

• •React diffs Virtual DOM against previous Virtual DOM, not the real DOM
• •Render Phase is pure JS and flags changed nodes; Commit Phase updates real DOM
• •Reconciliation minimizes browser repaints, not JS re-renders

Generated with AI, which can make mistakes.