Virtual DOM in React

What is Virtual DOM?

The Virtual DOM is a JavaScript representation of the actual DOM (Document Object Model). It's a lightweight copy kept in memory and synced with the real DOM.

How It Works

1. Virtual DOM Creation

// JSX
const element = <div className="container">Hello World</div>;

// Creates Virtual DOM object
{
  type: 'div',
  props: {
    className: 'container',
    children: 'Hello World'
  }
}

2. Reconciliation Process

1. State Changes: Component state or props update
2. New Virtual DOM: React creates new Virtual DOM tree
3. Diffing: Compare new tree with previous tree
4. Update: Apply only necessary changes to real DOM

Performance Benefits

1. Batch Updates

• Multiple state changes grouped together
• Single DOM update instead of multiple
• Reduces browser reflow and repaint

2. Efficient Diffing

• Element Type: Different types replace entirely
• Props: Only changed attributes updated
• Keys: Help identify which items changed

3. Minimal DOM Manipulation

• Only actual differences are applied
• Avoids unnecessary DOM operations
• Preserves component state when possible

Diffing Algorithm

Element Types

// Different types - complete replacement
<div>Hello</div> → <span>Hello</span>

// Same type - update props only
<div className="old">Hello</div> → <div className="new">Hello</div>

Keys in Lists

// Without keys - inefficient
{items.map(item => <div>{item.name}</div>)}

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

React Fiber

Modern React uses Fiber architecture:

• Incremental Rendering: Break work into chunks
• Prioritization: Important updates first
• Pausable: Can pause and resume work
• Concurrent Mode: Non-blocking updates

Limitations

1. Memory Overhead: Virtual DOM takes memory
2. Not Always Faster: Simple updates might be slower
3. Learning Curve: Understanding diffing rules
4. Over-optimization: Can lead to unnecessary complexity

Best Practices

1. Use Keys: Proper keys for list items
2. Avoid Inline Objects: Can cause unnecessary re-renders
3. Memoization: Use React.memo, useMemo, useCallback
4. Component Splitting: Smaller components for better optimization