Web Framework Deep Dive

React

The library that redefined how the web is built. Components + one-way data flow + a virtual DOM — React powers the UIs of Facebook, Instagram, Netflix, and a generation of SPAs.

JavaScript / TypeScriptComponent-basedDeclarativeLibrary (not framework)Meta
← Back to Client Side
Quick Facts

At a Glance

Language
JavaScript / TypeScript
Created
2013 · Meta (Facebook)
Style
Components + JSX
Render
Virtual DOM, fiber reconciler
Latest
React 19
Notable users
Meta, Netflix, Airbnb, Shopify

Basic Concepts

  • Component: a function that returns JSX (HTML-like markup with embedded expressions).
  • Props: read-only inputs passed from parent to child.
  • State: per-component data managed with useState; React re-renders when it changes.
  • Hooks: functions like useState, useEffect, useMemo that add behavior to components.
  • One-way data flow: parents pass props down; children fire callbacks up.
Syntax

Taste of React

import { useState, useEffect } from "react";

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading]   = useState(true);

  useEffect(() => {
    fetch("/api/products")
      .then(r => r.json())
      .then(data => { setProducts(data); setLoading(false); });
  }, []);

  if (loading) return <p>Loading…</p>;

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name} — ${p.price}</li>
      ))}
    </ul>
  );
}
Mechanics

Key Features

Hooks
  • useState — local component state.
  • useEffect — side effects (fetching, subscriptions, DOM).
  • useMemo / useCallback — memoize expensive values / functions.
  • useContext — read shared state without prop-drilling.
  • useRef — mutable values & DOM refs.
  • Custom hooks let you extract reusable logic across components.
JSX & the Virtual DOM

JSX compiles to React.createElement calls, producing a tree of plain objects. React's fiber reconciler diffs the tree against the previous render and applies the minimal DOM changes — fast, predictable updates.

Server Components & React 19

React Server Components (RSC) render on the server with zero JS shipped to the client — perfect for data-heavy pages. React 19 adds use(), the new Actions model, and useFormStatus / useOptimistic for form-driven UIs. Best experienced via Next.js.

State Management
LibraryWhen to use
React ContextSmall, infrequent shared state.
ZustandLightweight global store, minimal boilerplate.
Redux ToolkitLarge apps with strict patterns & devtools.
Jotai / RecoilAtomic, fine-grained reactivity.
TanStack Query / SWRServer-state caching & revalidation.
Ecosystem & Tooling
  • Build: Vite (default for SPAs), Next.js, Remix.
  • Routing: React Router, TanStack Router (in addition to meta-frameworks).
  • UI kits: Material UI, Ant Design, Chakra, shadcn/ui, Radix.
  • Forms: React Hook Form, Formik.
  • Test: Vitest / Jest + React Testing Library, Playwright.
Trade-offs

Strengths & Weaknesses

Strengths
  • Largest UI library by adoption — vast ecosystem & jobs.
  • Backed by Meta; extensive long-term investment.
  • Reusable everywhere: web, mobile (Native), desktop (Electron), VR.
  • Powerful escape hatches when you need them (refs, portals).
Weaknesses
  • "Just a library" — you must assemble routing, data, build yourself.
  • Hooks model has subtle rules (deps arrays, stale closures).
  • Performance footguns — easy to over-render without memoization.
  • Ecosystem churn (state libs, meta-frameworks shift constantly).
Where It Shines

Sweet Spots

Complex SPAs

Dashboards, admin tools, design tools — Figma, Notion, Linear.

Full-stack via Next.js

SSR, SSG, server components — the dominant React stack today.

Cross-platform Mobile

React Native shares skills & code with web teams.

Component Libraries

Reusable design systems shared across products.

Continue

Other Web Frameworks

AngularVueSvelteSolidNext.jsNuxtSvelteKit ↑ Back to Client Side