The Virtual DOM is a lightweight, in-memory representation of the real DOM. It allows React to determine what changed without directly manipulating the browser DOM for every update. Why the Virtual DOM? Problem with Real DOM How Virtual DOM Helps Expensive to update Compare in memory first Full re-render required Update only what changed Browser repaints costly Batch updates efficiently Manual tracking needed Automatic diffing How the Virtual DOM Works

Initial Render – React creates a Virtual DOM tree from your elements.

State/Props Change – A new Virtual DOM tree is created.

Diffing – React compares the new tree with the previous one.

Identify Changes – React determines the minimal set of updates.

Batch Update – React applies the changes to the real DOM.

Virtual DOM Diagram

┌─────────────────────────────────────────────────────────┐ │ Initial Render │ │ │ │ React Elements → Virtual DOM Tree → Real DOM │ │ │ └─────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────┐ │ State Change │ │ │ │ New React Elements → New Virtual DOM Tree │ │ │ └─────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────┐ │ Diffing │ │ │ │ Compare Old Virtual DOM with New Virtual DOM │ │ │ └─────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────┐ │ Commit │ │ │ │ Apply only the differences to the Real DOM │ │ │ └─────────────────────────────────────────────────────────┘

Virtual DOM vs Real DOM Feature Real DOM Virtual DOM Speed Slow (browser repaints) Fast (in-memory) Manipulation Direct DOM API React manages Memory Large Small Updates Manual Automatic (diffing) Representation Browser nodes JavaScript objects

Reconciliation is the algorithm React uses to compare two Virtual DOM trees and determine what changes need to be applied to the real DOM. The Diffing Algorithm

React uses a heuristic O(n) algorithm to compare trees efficiently. Key Assumptions

Different Element Types – Elements of different types produce different trees.

Keys – Developers can hint at which child elements are stable using keys.

Diffing Rules Scenario Behavior Different element types Tear down old tree, build new tree Same element type Update attributes/props Same component Update props, keep state Different component Unmount old, mount new Diffing Example

// Before
<div> <h1>Hello</h1> <p>World</p> </div>

// After
<div> <h1>Hello</h1> <p>React</p> </div>

// React compares:
// - div: same type → keep
// - h1: same type, same content → no change
// - p: same type, different content → update text
// Result: Only update the <p> element's text

Element Type Change

// Before
<div>
    <Counter />
</div>

// After
<span>
    <Counter />
</span>

// React behavior:
// - div vs span: different type → destroy entire tree
// - Rebuild from scratch (including Counter state)

Keys and Reconciliation

Keys help React identify which items have changed, been added, or removed.

// Without keys (inefficient)
<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>

// With keys (efficient)
<ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> 

Why Keys Matter Without Keys With Keys React re-renders all items React updates only changed items State may be lost State is preserved Performance issues Performance optimized Bugs with inputs Stable behavior Reconciliation Phases Phase Description Render Phase React calculates what needs to change (can be interrupted) Commit Phase React applies changes to the real DOM (synchronous)

import { useTransition, useDeferredValue } from 'react';

// useTransition: Mark updates as non-urgent
function Search() {
const [query, setQuery] = useState('');
const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
// Urgent: Update input
setQuery(e.target.value);

// Non-urgent: Update search results
startTransition(() => {
// Update results
});
};
}

// useDeferredValue: Defer expensive updates
function SearchResults({ query }) {
const deferredQuery = useDeferredValue(query);
// Use deferredQuery for expensive computation
}

import React from 'react';

// Prevents re-render if props haven't changed
const MyComponent = React.memo(function MyComponent({ name }) {
    console.log('Rendering MyComponent');
    return <div>Hello, {name}</div>;
});

// Only re-renders when name prop changes

import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) {
return (
<FixedSizeList
height={400}
width={300}
itemCount={items.length}
itemSize={35}

{({ index, style }) => (
<div style={style}> {items[index].name} </div> )} </FixedSizeList> ); } 

Understand the Render Cycle – Know when and why components re-render.

Avoid Unnecessary Renders – Use React.memo, useMemo, useCallback.

Use Keys Correctly – Always use stable, unique keys.

Profile Performance – Use React DevTools Profiler.

Leverage Concurrent Features – Use useTransition and useDeferredValue.

□

Are you using keys correctly in lists?
□

Are you avoiding unnecessary re-renders?
□

Are you using React.memo for expensive components?
□

Are you using useMemo for expensive calculations?
□

Are you using useCallback for stable function references?
□

Have you profiled your app with React DevTools?

import { useEffect, useRef } from 'react';

function useRenderCount() {
const renderCount = useRef(0);
useEffect(() => {
renderCount.current += 1;
});
return renderCount.current;
}

function MyComponent({ name }) {
const renders = useRenderCount();
console.log(MyComponent rendered ${renders} times);
return <div>Hello, {name}</div>;
}