Created by Jordan Walke at Facebook, React fundamentally revolutionized web development by replacing imperative DOM mutations (e.g. document.getElementById().appendChild()) with the Declarative UI Paradigm: the user interface is expressed purely as a deterministic projection of state over time:

When state changes, React recalculates the virtual representation and automatically applies the minimal set of native DOM mutations required to bring the screen into sync.

React attaches a single native event listener to the root container (#root) rather than attaching individual event handlers to thousands of child DOM nodes. When an event fires, React wraps the native browser event in a normalized SyntheticEvent object, dispatching it through the virtual fiber tree.

import React, { useState } from 'react';

// Immutability in React State: Always return new object references
interface ClusterConfig {
  name: string;
  replicas: number;
  tags: string[];
}

export function ClusterManager() {
  const [config, setConfig] = useState<ClusterConfig>({
    name: 'prod-cluster-us',
    replicas: 3,
    tags: ['k8s', 'production']
  });

  const handleAddTag = (newTag: string) => {
    // Correct Immutable Update: Spread operator creates new array reference!
    setConfig(prev => ({
      ...prev,
      tags: [...prev.tags, newTag]
    }));
  };

  return (
    <div className="p-6 bg-slate-900 text-white rounded-xl">
      <h2 className="text-xl font-bold">{config.name} (Replicas: {config.replicas})</h2>
      <button 
        onClick={() => handleAddTag('us-east-1')}
        className="mt-4 px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-500 font-semibold"
      >
        Add Region Tag
      </button>
    </div>
  );
}

Under the hood, hooks are stored as a singly linked list of Hook records attached to the fiber node's memoizedState pointer. This is why hooks must never be called conditionally or inside loops: React relies on strict call order to match state cells across re-renders!

import React, { useId, useActionState, useOptimistic } from 'react';

// React 19 Form Action & Optimistic UI Architecture
async function updateUsernameAction(previousState: { name: string }, formData: FormData) {
  const newName = formData.get('username') as string;
  await fetch('/api/user', { method: 'POST', body: JSON.stringify({ name: newName }) });
  return { name: newName };
}

export function ProfileEditor({ initialName }: { initialName: string }) {
  const inputId = useId(); // Generates stable accessible ID for SSR
  const [state, formAction, isPending] = useActionState(updateUsernameAction, { name: initialName });
  
  // React 19 useOptimistic: Instantly renders UI change before server responds!
  const [optimisticName, setOptimisticName] = useOptimistic(
    state.name,
    (current, update: string) => update
  );

  return (
    <form action={async (formData) => {
      setOptimisticName(formData.get('username') as string);
      await formAction(formData);
    }}>
      <label htmlFor={inputId} className="block font-bold mb-2">Display Name</label>
      <input id={inputId} name="username" defaultValue={optimisticName} className="border p-2 rounded" />
      <button type="submit" disabled={isPending} className="ml-2 px-4 py-2 bg-blue-600 text-white rounded">
        {isPending ? 'Saving...' : 'Save Profile'}
      </button>
    </form>
  );
}

React Fiber is an asynchronous, cooperative virtual call stack. Unlike standard JavaScript execution which runs to completion synchronously, Fiber allows React to pause long-running render calculations to let high-priority user input and animations run smoothly:

React uses a 31-bit Lane Priority Model to categorize tasks:

• SyncLane: Urgent user clicks and discrete keyboard typing.
• TransitionLanes (useTransition): Non-urgent updates (switching tabs, search filtering). If user types a new character, React cancels ongoing transition renders to prioritize the keystroke!

React 18 and 19 unlock Selective Hydration with <Suspense>: the server streams early HTML shells immediately, and hydrates interactive components independently as JavaScript chunks download. If a user clicks on an unhydrated component, React immediately jumps its hydration priority to the front of the queue!

React Server Components (RSC) execute exclusively on the backend server, outputting a lightweight JSON Flight stream graph with 0 KB of JavaScript shipped to the client bundle.

To prevent visual state tearing during concurrent rendering, modern state managers (Zustand, Redux Toolkit) subscribe to external mutable stores using useSyncExternalStore.

The React Compiler analyzes plain JavaScript code at build time, automatically injecting fine-grained memoization caches directly into the compiled AST output, rendering manual useMemo and useCallback boilerplate obsolete!

Never use dangerouslySetInnerHTML with un-sanitized user strings! Sanitize HTML using DOMPurify and validate all Server Action arguments against strict Zod schemas.

Compound Components share implicit state via React Context, enabling flexible, composable component APIs (e.g. Radix UI / Shadcn style tabs and dialogs).