Glossary
React’s vocabulary keeps growing — useEffectEvent and <Activity> shipped in 19.2, <ViewTransition> and addTransitionType in 19.3, and forwardRef is now on a stated deprecation path. When a lesson uses a term you’re unsure about, or unsure whether it’s still current for React 19.3, look it up here.
| Term | Meaning | Lesson |
|---|---|---|
| act | The React/RTL helper that flushes renders, effects, and microtasks before assertions run, so a test observes the DOM the way a browser would after an update settles — render/fireEvent/userEvent from Testing Library already wrap it for you in almost every case this course writes. | Testing |
| Actions | An async function passed to <form action={fn}> (or to startTransition) that React calls with the submitted FormData, managing pending state and, on success, resetting uncontrolled fields automatically — no onSubmit, preventDefault, or manual FormData assembly required. | Actions & useActionState |
<Activity> | A React 19.2 component that hides a subtree with display: none while tearing down its Effects exactly like a real unmount — but, unlike an unmount, keeps its state alive, so mode="visible" later resumes with the same useState values and a fresh Effect setup. | Activity & View Transitions |
| addTransitionType | Tags the currently-running Transition with a name (e.g. "submit-comment") so a <ViewTransition>’s enter/exit/update props can react differently depending on which Transition caused the update; called outside startTransition it still applies the type but logs a warning. | Activity & View Transitions |
| Term | Meaning | Lesson |
|---|---|---|
| batching | React collapsing several setState calls from one event into a single re-render. Since React 18 this is automatic everywhere — inside promises, setTimeout, and native event handlers, not just synchronous React event handlers — so three setter calls in one handler still produce one render. | useState & Updates |
| cacheSignal | A React 19.2, server-only API that returns an AbortSignal firing once React has finished rendering, so a cache()-scoped fetch or database call can cancel itself instead of finishing pointless work; it always returns null in Client Components. | use() & Data Fetching |
| children | The prop that holds whatever content was nested inside a JSX tag — undefined with no children, the bare value with exactly one child, or an array with two or more — never assume it is always an array. | JSX & Elements |
| commit phase | The second half of an update: React compares the new element tree to the previous one and applies only the DOM changes reconciliation found — the only phase where side effects (a real DOM write) are allowed to happen. | Rendering & Reconciliation |
| component | A function that takes props (read-only inputs from its parent) and its own state, and returns a description of UI; the same component called with different props/state must deterministically produce different output — that determinism is what reconciliation and the compiler both rely on. | Why React & the Model |
ComponentProps | A TypeScript utility type that “steals” a host element’s (or another component’s) prop types — React.ComponentProps<'button'> gives you every valid <button> prop without hand-typing them again. | TypeScript with React |
| composition | React’s mechanism for reuse instead of inheritance: pass content or behavior into a component (as children or a named slot prop) rather than extending it — the generic component never needs to know what it was handed. | Composition Patterns |
| compound components | A family of components (like <Tabs><Tab/><TabPanel/></Tabs>) that coordinate through shared, usually context-based, state while the consumer arranges the pieces freely — the pattern behind libraries like Radix and Headless UI. | Composition Patterns |
Context / <Context> as provider | Lets a parent make a value available to every descendant without passing props through every layer in between; since React 19 you can render the context object itself as the provider (<ThemeContext value={theme}>), no .Provider required, though the classic form still works. | Context |
| controlled / uncontrolled | A controlled input’s value is driven by React state (value + onChange); an uncontrolled input’s value lives in the DOM (defaultValue, read via a ref or FormData). Both are valid — the rule that matters is never flipping one input between them across its lifetime, or React logs a real console warning. | Lifting State & Composition |
| Term | Meaning | Lesson |
|---|---|---|
| derived state | A value computed directly from existing props/state during render (const fullName = first + ' ' + last) instead of mirrored into its own state with a syncing useEffect — the derived version is never stale and costs no extra render. | Lifting State & Composition |
| effect cleanup | The function an effect returns, run before the effect’s next setup (on a dependency change) and on unmount, to undo exactly what the effect set up — disconnect, clear a timer, remove a listener. Skipping it is the #1 source of duplicate connections and leaks. | useEffect & Effects |
| element | The plain, cheap, immutable object JSX compiles down to ($$typeof, type, key, props) — a description of UI, not a live DOM node. A component instance’s state is what reconciliation works to preserve across throwaway element descriptions from render to render. | JSX & Elements |
| error boundary | A class component (getDerivedStateFromError + componentDidCatch) that catches errors thrown during rendering, lifecycle, or construction of the components below it, showing a fallback instead of unmounting the whole app — it does not catch errors in event handlers or async code. | Error Boundaries |
| eslint-plugin-react-hooks | The official lint plugin that enforces the Rules of Hooks and, since v6, also ships the React Compiler’s own diagnostics (set-state-in-render, immutability, purity, and more) as ordinary ESLint errors, catching a mutation the compiler would otherwise silently skip over. | Rules & Custom Hooks |
| fallback | The UI a <Suspense fallback={...}> boundary shows while any child inside it suspends; React swaps in the real content the instant the awaited code or data resolves. | Suspense & lazy |
| fiber | React’s internal unit of work for a component instance during the render/commit cycle — the data structure that lets React pause, resume, and prioritize rendering. This course only needs the render/commit split above it; the fiber architecture itself is covered in the internals module. | Rendering & Reconciliation |
| flushSync | Forces a state update and its DOM commit to happen synchronously, before the next line of code runs — for the rare case (measuring right after adding an item, a print dialog) that needs the DOM updated immediately; it defeats batching and hurts performance if overused. | Refs, Portals & Escape Hatches |
| HOC (higher-order component) | A function that takes a component and returns a new, wrapped one — the pre-hooks way to share cross-cutting behavior. Its two chronic pitfalls, forgetting to forward ref and forgetting a displayName, are exactly why custom hooks replaced most HOC usage. | Composition Patterns |
| hook (Rules of Hooks) | The two rules — call hooks only at the top level (never in a condition, loop, or after an early return), and only from a component or another hook — exist because React matches each hook call to a memory slot by call order; breaking them throws a real “Rendered fewer hooks than expected” error, not just a lint warning. | Rules & Custom Hooks |
| hydrateRoot | The React 19 client entry point for attaching to server-rendered HTML (as opposed to createRoot, which renders from scratch); both accept onCaughtError/onUncaughtError/onRecoverableError options and an identifierPrefix to keep two independent apps’ useId values from colliding on one page. | Error Boundaries |
| hydration | React attaching event handlers and state to already-rendered, server-produced HTML in the browser, reusing the markup instead of rebuilding it — it requires the client’s first render to match the server’s output exactly. | External Stores |
| hydration mismatch | What happens when the client’s first render produces different output than the server-rendered HTML it’s attaching to; React repairs some mismatches automatically (observable via onRecoverableError) but a mismatch is never free — it’s a sign two renders of the same inputs disagreed. | External Stores |
| Term | Meaning | Lesson |
|---|---|---|
| isPending | The boolean useTransition and useActionState both return, true for the entire lifetime of the wrapped update — including across an await inside an async startTransition callback — so a button can disable itself or show “Saving…” without hand-rolled loading state. | Transitions |
| JSX (automatic runtime) | Syntax sugar that compiles, via the modern automatic runtime, to jsx(type, props) calls imported from react/jsx-runtime — JSX is a JavaScript expression, so { } inside it just drops back into plain JS, and no import React is needed anymore just to use it. | JSX & Elements |
| key | A stable, unique-among-siblings identity (a data id, never the array index for a list that can reorder) that lets reconciliation track which list item is which across renders; the same mechanism doubles as a deliberate reset switch — change a single component’s key to force React to discard its old instance and mount a fresh one. | Rendering & Reconciliation |
| lazy | React.lazy(() => import('./X')) code-splits a component into its own chunk, downloaded only when it first renders, and suspends until the chunk arrives; a failed import is cached on that one lazy() instance forever, so retrying needs a brand-new lazy() call, not a re-render of the old one. | Suspense & lazy |
| lifting state up | Moving shared state to the closest common ancestor of the components that need it, so it has a single source of truth and both children read/update it through props — the default fix whenever two components must stay in sync. | Lifting State & Composition |
| memo | React.memo(Component) skips re-rendering a component when its props are shallow-equal to the previous render — it only pays off when every prop is referentially stable, so a fresh inline object/array/function prop defeats it completely, every time. | Memoization & the Compiler |
| Object.is bail-out | The same-value comparison (=== with the NaN/-0 edge cases fixed) React uses to decide whether a setState call needs a new render; setting the identical value skips the render entirely, and — because it’s a reference check — mutating an object and passing the same reference back silently skips the render too, even though the data really changed. | State Snapshot & Purity |
| onCaughtError / onUncaughtError / onRecoverableError | Since React 19, options passed to createRoot/hydrateRoot that let you observe every error React handles centrally — caught by a boundary, uncaught by any boundary, or a hydration mismatch React silently repaired — instead of relying only on console.error. | Error Boundaries |
| Term | Meaning | Lesson |
|---|---|---|
| polymorphic component | A component that renders as whichever element the caller picks via an as prop (<Text as="a" href="...">, <Text as="button" onClick={...}>), while ComponentPropsWithoutRef<E> re-derives the correct, element-specific prop types for whatever E was chosen. | Composition Patterns |
portal / createPortal | Renders children into a different DOM node (typically document.body, for a modal or tooltip escaping a clipping parent) while keeping them logically in the same place in the React tree — context still flows in, and events still bubble through the React ancestors, not the DOM ancestors. | Refs, Portals & Escape Hatches |
| Profiler | The <Profiler id="..." onRender={...}> component React calls after every commit inside it with real numbers (phase, actualDuration, baseDuration) — the way to measure whether a subtree is re-rendering too often, instead of guessing. | Rendering Performance |
| props | The read-only inputs a component receives from its parent; a component must never modify its own props, and the same props (with the same state) must always render the same output. | Why React & the Model |
| purity | The requirement that render — everything a component does while computing its returned JSX — produce the same output for the same props/state, with no mutation and no side effects; the React Compiler’s memoization and StrictMode’s double-render both depend on this holding. | State Snapshot & Purity |
| React Compiler | A stable (as of [email protected]), build-time tool that analyzes plain, un-memoized code and inserts the equivalent of useMemo/useCallback/memo for you, at a finer grain than most hand-written code — it silently skips (bails out on) any function it can’t prove follows the Rules of React. | The React Compiler |
react-dom/static (prerender) | The react-dom/static entry point’s prerender/prerenderToNodeStream APIs generate fully-static HTML for a route with no client-side interactivity step, distinct from the streaming renderToPipeableStream; this course’s Vite probe doesn’t run a static-export build, so treat this as an accurate pointer rather than a locally-proven fact. | Production & Ecosystem |
| ReactNode vs ReactElement | ReactNode is the broadest “anything renderable” type (JSX, strings, numbers, arrays, null) — the right type for a children prop; ReactElement is narrower, the actual object type JSX evaluates to, useful when a value must specifically be a single rendered element rather than any renderable content. | TypeScript with React |
| reconciliation | The algorithm that diffs the new element tree against the previous one, in O(n) instead of a naive O(n³), using two rules: same type keeps the DOM node and its state, updating only changed props; different type unmounts the old subtree and mounts a new one, destroying its state. | Rendering & Reconciliation |
| ref (as a prop in React 19) | Since React 19, ref is an ordinary prop any function component can declare and use directly — no forwardRef required; react.dev now states plainly that forwardRef “will be deprecated in a future release,” so new components should accept ref as a prop from the start. | JSX & Elements |
| ref callback cleanup | Since React 19, a ref given as a callback function may return a cleanup function, which React calls when the ref detaches or right before attaching a new callback instance — the older “call it again with null” fallback is documented to be removed in a future version. | useRef & the DOM |
| render phase | The first half of an update: React calls your components to build a new element tree. It is pure computation — no DOM is touched, and React can pause, restart, or throw the work away — which is exactly what makes concurrent rendering possible. | Rendering & Reconciliation |
| render prop | A prop whose value is a function that returns JSX, letting a component share logic while the caller controls rendering (<MouseTracker render={({x,y}) => ...} />); a custom hook does the same job more directly today, but children-as-a-function is still a common, type-safe surviving shape. | Composition Patterns |
| renderToPipeableStream | The react-dom/server API that streams server-rendered HTML to the client in pieces as it becomes ready, rather than waiting for the whole tree; its client counterpart is hydrateRoot, and matching identifierPrefix on both sides keeps useId collision-free when more than one app shares a page. | useId & the Other Hooks |
| requestFormReset | An Action-only API (from react-dom) that imperatively resets a form’s uncontrolled fields outside of a submission — a “Clear” button, for instance; called outside a Transition or Action it still resets the fields, but React logs a console warning. | Actions & useActionState |
| RSC payload | The serialized description of a rendered Server Component tree (informally “Flight”) that the server sends the client instead of HTML strings — the client’s React reconstructs Client Components from it and slots in the Server Components’ already-rendered output, which is also why props crossing that boundary must be serializable. | Server Components |
| RTL (Testing Library) | React Testing Library — the dominant way to test components: render, interact with userEvent the way a user would, and query by role/label/text, asserting on what’s visible rather than on internal state or which hooks a component calls. | Testing |
| Term | Meaning | Lesson |
|---|---|---|
| Server Components | Components that run on the server, can be async and fetch data directly (no useEffect, no loading state), and never ship their own code to the browser — the client only ever receives the rendered RSC payload. RSC is adopted through a framework like Next.js App Router, not bare React + a bundler. | Server Components |
Server Functions / 'use server' | An async function marked 'use server' (on the function or the whole file) that a Client Component can call as if it were local, even though calling it actually serializes the arguments and triggers a network request to run the real body on the server. | Server Components |
| snapshot (state) | Reading a state variable gives you its value frozen for this render — a photograph, not a live feed — even from inside a closure (like a setTimeout callback) that outlives the render it was created in; a re-render is a fresh call of the component function with a new snapshot. | State Snapshot & Purity |
| startTransition | Marks a state update as non-urgent so React renders it as interruptible background work a more urgent update (like the next keystroke) can preempt; since React 19 its callback may be async, but only code before the first await (plus anything re-wrapped after) is actually part of the Transition. | Transitions |
| StrictMode | A development-only wrapper that deliberately renders components twice and runs effect setup→cleanup→setup once on mount, to surface impure renders and unsafe effects immediately instead of letting them corrupt state later; it has zero cost in production, where everything runs exactly once. | Rendering & Reconciliation |
| Suspense | <Suspense fallback={...}> shows declarative loading UI for a subtree — no manual isLoading booleans — while any child inside it suspends on code (React.lazy) or data (use()), swapping in the real content once it resolves. | Suspense & lazy |
| Suspense boundary | The <Suspense> wrapper itself, the unit React unwinds to when a descendant suspends; boundaries nest to control loading granularity, and giving one a key forces its fallback to show again on a genuine content change instead of leaving stale content on screen. | Suspense & lazy |
| tearing | Different components reading the same external value disagreeing about it within one render — one shows the old value, one shows the new — a hazard specific to concurrent rendering that useSyncExternalStore exists to make impossible. | External Stores |
| transition | A state update explicitly marked non-urgent (via startTransition/useTransition) so React can interrupt its background render for something more urgent; it changes an update’s priority, never its cost — a genuinely expensive computation still needs its own optimization. | Transitions |
| Term | Meaning | Lesson |
|---|---|---|
| updater function | The setX(x => ...) form of a state setter, which React applies against the latest pending value rather than the frozen render snapshot — the fix for calling the same setter more than once per event; it must be pure, since Strict Mode calls it twice in development to check exactly that. | useState & Updates |
| use() | A React 19 API that reads a promise or context during render; passed a pending promise it suspends the component (showing the nearest Suspense fallback) until it resolves, and unlike other hooks it may be called conditionally, in loops, or after an early return. | use() & Data Fetching |
'use client' | The directive marking the boundary where code becomes a Client Component — that file and everything it imports ships to the browser and can use state, effects, and event handlers, which a Server Component cannot. | Server Components |
"use no memo" | A function-level directive that opts a component out of React Compiler compilation entirely, even under the default 'infer' mode — an escape hatch for a component you suspect the compiler mishandles, while you fix the underlying Rules-of-React violation. | The React Compiler |
| useActionState | Wraps an action and returns [state, formAction, isPending]; the action itself receives (previousState, formData) and returns the next state, collapsing the old useState-for-data + useState-for-loading + try/catch/finally pattern into one call that can’t forget to reset the pending flag. | Actions & useActionState |
| useCallback | Caches a function’s identity across renders until its dependencies change — useMemo specialized for functions; it only prevents a child’s re-render when paired with a component wrapped in React.memo, since a stable reference alone does nothing for a plain child. | Memoization in Practice |
| useDeferredValue | Lets a value “lag behind” during urgent work instead of blocking it, with no fixed delay — React starts the background re-render as soon as the current one finishes, and restarts it if interrupted by a newer value; since React 19 it accepts an initialValue used only for the very first render. | Transitions |
| useEffect | Synchronizes a component with something outside React’s control — a connection, subscription, timer, or browser API — via a dependency array and a required cleanup; if the goal is deriving data or reacting to an event instead, you almost certainly don’t need an effect at all. | useEffect & Effects |
| useEffectEvent | Shipped stable in React 19.2: extracts the non-reactive part of an effect into an “Effect Event” that always reads the latest props/state without itself being a reactive dependency — the fix for needing a fresh value inside an effect without forcing that effect to re-run on every change to it. | useEffect & Effects |
| useFormStatus | Lets a component (from react-dom) read the pending status of the nearest parent <form> with zero prop drilling; it must be called from a descendant of the form, not the component that renders the <form> tag itself, or it silently always reports pending: false. | Forms & useOptimistic |
| useId | Generates a unique, SSR-safe id string for one component instance, matched between server-rendered HTML and the client’s hydration pass — a hand-rolled counter or Math.random() can’t guarantee that match. It is for accessibility attribute ids, never for list keys. | useId & the Other Hooks |
| useImperativeHandle | Defines exactly which methods a parent’s ref can call on a component, instead of exposing the raw DOM node — since React 19 it composes directly with ref-as-a-prop, no forwardRef wrapper required. | useRef & the DOM |
| useInsertionEffect | Fires before any layout effects, specifically so a CSS-in-JS library can inject <style> tags before a useLayoutEffect reads layout that depends on them — react.dev calls it out as intended for CSS-in-JS library authors, not ordinary application code. | useId & the Other Hooks |
| useLayoutEffect | Runs synchronously after React commits DOM changes but before the browser paints, so measuring a node’s just-committed layout and immediately repositioning it never visibly flickers the way the same code inside useEffect (which runs after paint) can. | Refs, Portals & Escape Hatches |
| useMemo | Caches the return value of an expensive computation, recomputing only when a dependency changes; with the React Compiler adopted, most of this is inserted automatically, so manual useMemo is reserved for code the compiler can’t reach or a profiler still flags. | Memoization & the Compiler |
| useOptimistic | Shows an expected result immediately and lets React automatically revert to the real value if the async action fails — no manual rollback code. The setter must run inside startTransition or an Action; called from a plain event handler, React logs a warning and the value reverts immediately. | Forms & useOptimistic |
| useReducer | Consolidates state-transition logic that changes several values together into one pure (state, action) => nextState function, dispatched by describing what happened rather than computing the next value at the call site; like a reducer’s purity requirement, mutating and returning the same reference can make React skip the re-render entirely. | useReducer Patterns |
| useRef | Gives a mutable { current } box that survives renders without triggering one when changed — for values to remember but not display (a timer id, a previous value) and for DOM access (focus, measure); reading or writing ref.current during render itself, rather than in an event handler or effect, is a real bug. | useRef & the DOM |
| useState | Returns the current value for this render plus a setter that schedules a re-render with a new value — it never mutates the snapshot in place; the setter’s argument is only evaluated as a lazy initializer function on the very first render. | useState & Updates |
| useSyncExternalStore | Subscribes a component to a store outside React (a global variable, a browser API, a library like Redux) without tearing, giving every consumer one consistent snapshot per render; getSnapshot must return a primitive or a cached reference, or a new object every call causes a real infinite loop. | External Stores |
| useTransition | Returns [isPending, startTransition] — the hook form of marking an update non-urgent when you own the state setter at the call site; reach for useDeferredValue instead when you only have a value (a prop), with no setter to wrap. | Transitions |
| Term | Meaning | Lesson |
|---|---|---|
<ViewTransition> | Wraps a subtree so that when it enters, exits, or updates during a Transition, React drives the browser’s native View Transition API to animate the change; it shipped in the stable React 19.3 release and never throws in an environment (like jsdom) that lacks the browser API — it just renders plain, unanimated children. | Activity & View Transitions |
| vitest | The test runner this course’s probes run on, paired with React Testing Library — fast, Vite-native, and the default choice alongside (or instead of) Jest for a modern React + Vite project. | Testing |