React

What it is

React is a JavaScript library for building user interfaces, created by Meta (then Facebook) and released as open source in 2013. Its core mental model: UI is a function of state. When state changes, React computes the minimal DOM difference and applies only the necessary updates.

Unlike frameworks such as Angular or Vue that offer a complete solution (routing, forms, HTTP), React focuses exclusively on the view layer. The ecosystem — Next.js, React Router, Zustand — complements what React does not include.

Component model

Everything in React is a component: a function that receives props and returns JSX. Since React 16.8 (2019), hooks replaced class components as the primary pattern:

import { useState } from "react";
 
function Counter({ initial = 0 }: { initial?: number }) {
  const [count, setCount] = useState(initial);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>
        Increment
      </button>
    </div>
  );
}

The fundamental hooks:

React 19

React 19 (December 2024) introduces significant changes in how data and forms are handled:

Actions and forms. useActionState replaces the manual useState + onSubmit + try/catch pattern for forms:

import { useActionState } from "react";
 
function LoginForm() {
  const [state, submitAction, isPending] = useActionState(
    async (_prev: { error?: string }, formData: FormData) => {
      const res = await login(formData.get("email") as string);
      if (!res.ok) return { error: "Invalid credentials" };
      redirect("/dashboard");
      return {};
    },
    {}
  );
 
  return (
    <form action={submitAction}>
      <input name="email" type="email" required />
      <button disabled={isPending}>
        {isPending ? "Submitting..." : "Sign in"}
      </button>
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

use() for promises and context. Allows reading promises directly in render, integrating with Suspense:

import { use, Suspense } from "react";
 
function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);
  return <h1>{user.name}</h1>;
}
 
// Usage with Suspense boundary
<Suspense fallback={<p>Loading...</p>}>
  <UserProfile userPromise={fetchUser(id)} />
</Suspense>

Other React 19 features:

Performance patterns

React re-renders a component every time its state or props change. In large applications, this can cause performance issues:

Practical rules:

• Do not optimize prematurely — measure first with React DevTools Profiler
• React.memo only when the component frequently receives the same props
• useMemo/useCallback only when the cost of recomputing exceeds the cost of memoizing
• With React Compiler (React 19+), manual memoization becomes unnecessary in most cases

Server Components vs Client Components

Server Components fundamentally change the architecture of React applications. The distinction:

The rule: start with Server Components by default. Add "use client" only when interactivity, state, or browser APIs are needed.

Ecosystem

Why it matters

React defined the component-based UI paradigm that dominates web development. With Server Components and React 19, it evolves from a client library to a full-stack model where server and client collaborate in the same component tree. For a senior engineer, understanding the boundary between Server and Client Components — and when to cross it — is the most important architectural decision in any modern React project.

References

• React Documentation — Meta. Official documentation with guides, API reference, and interactive tutorials.
• React 19 — React Team, 2024. Official announcement with Actions, use(), React Compiler, and new hooks.
• Server Components — React. Official React Server Components reference.
• A Complete Guide to useEffect — Dan Abramov, 2019. Deep guide on the mental model of effects in React.
• Making Sense of React Server Components — Josh W. Comeau, 2024. Visual explanation of Server Components and their architectural impact.
• React Compiler — React. Documentation for the compiler that automates memoization.