What is React.js? Virtual DOM, Fiber Reconciliation, and Server Components

React.js, created by Jordan Walke at Meta in 2013, redefined modern web engineering. Instead of manually querying and updating the browser DOM, React introduced declarative component-based UI where the interface is a predictable function of application state.

1. How to Initialize a Modern React Project

Developers initialize React applications using either Next.js (for full-stack apps with server rendering and SEO) or Vite (for fast client-side applications):

# Option A: Full-Stack React with Next.js App Router (Recommended for SEO)
npx create-next-app@latest my-react-app --typescript --tailwind --eslint --app

cd my-react-app
npm run dev

# Option B: Client-Side React SPA with Vite
npm create vite@latest my-vite-app -- --template react-ts
cd my-vite-app
npm install
npm run dev

2. The Virtual DOM and React Fiber Engine

Direct browser DOM updates are computationally expensive because mutating the DOM triggers browser layout recalculation and repainting. React creates a lightweight in-memory representation of JavaScript objects called the Virtual DOM.

In React 16 and above, Meta rebuilt React's internal core with the Fiber Architecture. Fiber breaks rendering work into incremental units that can be paused, aborted, or re-prioritized. If a user types in an input while a large list is rendering in the background, React pauses the list render, updates the input instantly, and then resumes the background task.

3. The Heuristic Diffing Algorithm

Comparing two arbitrary trees algorithmically requires O(n³) operations. React reduces this to O(n) based on two foundational rules:

1. Elements of different types produce entirely different trees (changing a div to a section unmounts the old subtree and mounts the new one).

2. Child elements with stable key attributes preserve their identity across renders, allowing React to reorder DOM nodes rather than destroying and recreating them.

4. React Server Components (RSC)

In Next.js App Router, components run on the server by default. Server Components execute exclusively on the server at request time or build time, accessing databases and backend services directly without shipping unnecessary JavaScript libraries to the user's browser.