The Glossary of React

Core Concepts

JSX — A syntax extension that lets developers write HTML-like markup directly inside JavaScript, which is then compiled into React.createElement calls (or, in the modern JSX transform, calls to a similar internal function).

Element — A plain, immutable JavaScript object describing what should appear on screen — the lightweight output of a JSX expression, not yet an actual DOM node.

Component — A function (or, historically, a class) that accepts props and returns elements describing what should render.

Props — The read-only inputs passed into a component by its parent, used to configure its output and behavior.

State — Data owned by a component that can change over time and, when it changes, triggers that component to re-render.

Render — The process of a component being called to produce its element output; happens on initial mount and again whenever state or props change.

Reconciliation — React's process of comparing a new render's output to the previous one and computing the minimal set of real DOM changes required — commonly called "diffing."

Virtual DOM — The in-memory tree of elements React builds on each render, which it diffs against the previous tree before touching the actual browser DOM.

Key — A special prop used when rendering lists, giving React a stable identity for each item so it can track additions, removals, and reordering correctly during reconciliation.

Fragment — A wrapper (<>...</> or React.Fragment) that groups multiple elements without adding an extra node to the actual DOM.

The Hooks API

Hook — A function (always starting with use) that lets a function component tap into React features like state or lifecycle behavior, introduced in React 16.8 as an alternative to class components.

useState — The hook that adds a piece of local state to a function component, returning the current value and a setter function.

useEffect — The hook that runs side effects — data fetching, subscriptions, manual DOM changes — after a component renders, with a dependency array controlling when it re-runs.

Dependency Array — The array passed as the second argument to hooks like useEffect or useMemo, telling React which values to watch in order to decide whether to re-run the hook.

useContext — The hook that reads a value from the nearest matching Context Provider above a component in the tree, without needing to pass it down as a prop.

useRef — The hook that creates a mutable value that persists across renders without itself triggering a re-render when changed, often used to reference a DOM node directly.

useMemo — The hook that caches (memoizes) the result of an expensive calculation, recomputing it only when its dependencies change.

useCallback — The hook that memoizes a function definition itself, useful for avoiding unnecessary re-renders of child components that receive the function as a prop.

useReducer — The hook that manages more complex state transitions through a reducer function, similar in spirit to Redux but local to a component.

Custom Hook — A developer-defined function, prefixed with use, that composes React's built-in hooks into reusable, shareable logic.

Rules of Hooks — The two constraints React enforces on hook usage: hooks must be called at the top level of a component (never inside loops, conditions, or nested functions), and only from React function components or other hooks.

Component Patterns

Controlled Component — A form element (like an input) whose value is driven entirely by React state, with every change flowing through a state update.

Uncontrolled Component — A form element that manages its own internal value in the DOM, typically accessed via a ref rather than state.

Higher-Order Component (HOC) — A function that takes a component and returns a new, enhanced component — an older pattern for sharing logic across components, largely superseded by custom hooks.

Render Props — A pattern where a component accepts a function as a prop (often literally called render or children) and calls it to determine what to render, sharing logic without inheritance.

Compound Components — A pattern where several components are designed to work together and share implicit state, exposed as a single, related API (like <Select> and <Select.Option>).

Prop Drilling — The awkward pattern of passing props through several intermediate components that don't themselves need the data, just to reach a deeply nested child — one of the main problems Context and state management libraries solve.

Composition — Building complex UIs by nesting and combining simpler components, generally preferred in React over inheritance.

Portal — A React feature (ReactDOM.createPortal) that renders a component's output into a different part of the actual DOM tree than its logical position in the React tree, commonly used for modals and tooltips.

State & Data Flow

Context — A mechanism for passing data through the component tree without explicitly threading it through props at every level, created with createContext and read with useContext.

Lifting State Up — Moving state from a child component to their closest common ancestor so that multiple components can share and stay in sync with it.

Unidirectional Data Flow — React's core data-flow principle: data flows down through props, and changes flow back up through callback functions, rather than binding data in both directions automatically.

Redux — A predictable state container built on a single store, pure reducer functions, and dispatched actions, historically the dominant solution for complex global state in React apps.

Zustand / Jotai / Recoil — A newer generation of state management libraries offering lighter-weight, hook-based alternatives to Redux's boilerplate, using stores or atoms as the unit of state.

Server State — Data that originates from and is owned by a server (API responses, database records) as distinct from local UI state — the problem libraries like React Query and SWR are designed to manage.

React Query / SWR — Libraries that handle fetching, caching, revalidating, and synchronizing server state with the UI, including features like background refetching and stale-data handling.

Rendering, Performance & the Modern Stack

Fiber — React's internal reconciliation engine (since React 16), which reworked rendering into an interruptible, priority-based process instead of one uninterrupted recursive pass.

Concurrent Rendering — A set of React capabilities (stabilized in React 18) that let React prepare multiple versions of the UI at once and interrupt lower-priority rendering work in favor of more urgent updates.

Suspense — A component that lets other components "wait" for something — typically data or a lazily loaded module — before rendering, showing a fallback UI in the meantime.

Transition (useTransition / startTransition) — An API for marking a state update as non-urgent, letting React keep the UI responsive while that update renders in the background.

Server Components (RSC) — Components that render exclusively on the server and send their output to the client without shipping their own JavaScript, reducing bundle size for content that doesn't need client-side interactivity.

Client Component — In frameworks that support Server Components, a component explicitly marked (often with "use client") to run and hydrate in the browser as usual.

Hydration — The process of attaching event handlers and state to server-rendered HTML in the browser, turning static markup into an interactive React app.

Memoization (React.memo) — Wrapping a component so React skips re-rendering it when its props haven't changed, reducing unnecessary render work.

Strict Mode — A development-only wrapper component that intentionally double-invokes certain functions and highlights potential problems, without affecting production behavior.

Ecosystem & Tooling

Create React App / Vite — Tooling for scaffolding and running React projects during development; Vite has largely superseded Create React App for new projects due to its faster dev server.

Next.js — A React framework that adds file-based routing, server-side rendering, static generation, and Server Components on top of React itself.

React Router — The most widely used routing library for single-page React applications that aren't built on a framework with routing built in.

Testing Library — A family of testing utilities (React Testing Library being the React-specific member) built around testing components the way a user would interact with them, rather than testing internal implementation details.

Storybook — A tool for developing and documenting UI components in isolation, outside of a full application, often used to build a visual component library.

ESLint Plugin React / Hooks — Linting rules that catch common React mistakes, including violations of the Rules of Hooks, before they cause bugs at runtime.

Taken together, this glossary is really the story of React solving its own problems in public: class components' verbosity gave way to Hooks; prop drilling gave way to Context and then to dedicated state libraries; a single synchronous render pass gave way to Fiber and concurrent rendering; and client-only rendering is now giving way, gradually, to a hybrid of Server and Client Components. Each new term marks a place where the library's own creators decided the previous answer wasn't good enough — which is, in miniature, the same story told by The Glossary of Frontend Development at the scale of the whole platform.

*written with Claude Sonnet 5

Reference - https://www.youtube.com/watch?v=wIyHSOugGGw