What Is React and the Virtual DOM

React is a declarative JavaScript library for building user interfaces, originally created by Meta (Facebook) and open-sourced in 2013. Rather than directly manipulating the browser DOM on every change, React maintains a lightweight in-memory representation called the virtual DOM. When state or props change, React diffs the new virtual DOM against the previous snapshot and applies only the minimal set of real DOM updates needed — a process called reconciliation. This approach makes updates fast and predictable regardless of application size. React embraces a component-based architecture, where every piece of UI is an isolated, reusable function or class that manages its own logic and appearance. Components compose together to form complex screens while remaining easy to test and reason about individually. Because React only handles the view layer, you are free to pair it with any data-fetching, routing, or state-management library that suits your project. The ecosystem around React — including React Router, Redux, React Query, and Next.js — has grown to cover virtually every front-end requirement. React 18 introduced concurrent rendering, which lets React interrupt and prioritise work to keep the interface responsive even under heavy computation. Understanding the virtual DOM and the reconciliation algorithm is foundational to writing performant React applications.

Example

// React reconciles virtual DOM changes to real DOM changes.
// Conceptual illustration — not actual React internals:

const prevVDOM = {
  type: 'ul',
  props: { className: 'list' },
  children: [
    { type: 'li', props: {}, children: ['Apple'] },
    { type: 'li', props: {}, children: ['Banana'] },
  ],
};

const nextVDOM = {
  type: 'ul',
  props: { className: 'list' },
  children: [
    { type: 'li', props: {}, children: ['Apple'] },
    { type: 'li', props: {}, children: ['Banana'] },
    { type: 'li', props: {}, children: ['Cherry'] }, // NEW
  ],
};

// React detects only one new <li> and appends it — it does NOT
// re-render the entire list.

// Real usage — React re-renders only the changed component:
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  console.log('Counter rendered'); // logs only when count changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

HTML

Full Editor

Related Resources

React Reference

Complete tag & property list

React How-To Guides

Step-by-step practical guides

React Exercises

Practice what you've learned