Introduction to React

React is a free, open-source JavaScript library built by Facebook (Meta) in 2013. It is used to build user interfaces (UIs), specifically the part of a website or app that users see and interact with (the “front end”).

React is not a full framework like Angular. It focuses on one thing only: building UI components. Everything else (routing, state management, API calls) you plug in as needed.

FAQs:

Q1. Is the Virtual DOM always faster than directly updating the real DOM?

Not always. For very simple apps with minimal DOM changes, directly updating the real DOM (as in vanilla JS) can be slightly faster because there’s no overhead of creating and diffing the virtual tree. The Virtual DOM pays off when the UI is complex, has many components, and state changes happen frequently. That’s when React’s batching and diffing save significant time.

Q2. Is the Virtual DOM a browser feature?

No. It is purely a React (and similar libraries’) concept implemented in JavaScript. The browser has no idea the Virtual DOM exists. It only receives the final, minimal set of real DOM updates from React.

Q3. What is the “diffing algorithm” exactly?

React uses a heuristic O(n) algorithm (instead of the theoretically optimal O(n³)). The key rules are:

• If two elements have different types (e.g., <div> vs <span>), React destroys the old tree and builds a new one from scratch.
• If they are the same type, React updates only the changed attributes/children.
• For lists, React uses key props to track which items moved, were added, or removed.

// Without key — React may re-render the whole list
<ul>
  {items.map(item => <li>{item.name}</li>)}
</ul>

// With key — React efficiently tracks each item
<ul>
  {items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

Always use a unique key on list items. This is how React’s diff algorithm stays fast for lists.

Q4. What is “reconciliation”?

Reconciliation is the full process React uses to keep the real DOM in sync with the Virtual DOM. It includes: building the new virtual tree on state change, diffing it against the old tree, and applying the minimum set of real DOM changes. The Virtual DOM diff is one part of reconciliation.

Q5. Does React always update the DOM immediately when state changes?

No. React batches multiple state updates together and processes them in one go. This means if you call setCount, setName, and setError in the same event handler, React does one reconciliation pass, not three. This further reduces unnecessary real DOM updates.

function handleClick() {
  setCount(c => c + 1);   // batched
  setName('Alice');        // batched
  setError(null);          // batched
  // React runs ONE reconciliation pass after all three
}

Q6. What is the Shadow DOM? Is it the same as the Virtual DOM?

They sound similar but are completely different things:

Q7. Do other frameworks use the Virtual DOM?

Vue.js also uses a Virtual DOM. Svelte is different — it compiles your components at build time directly into surgical real DOM update code, skipping the runtime Virtual DOM entirely. Angular uses a different technique called change detection with zones.

// The simplest React component
function Hello() {
  return <h1>Hello, World!</h1>;
}

That mix of HTML inside JavaScript is called JSX (JavaScript XML). React uses JSX to describe what the UI should look like.