A reference dictionary of terms you will encounter in the React ecosystem. Each entry includes a concise definition and, where helpful, a short code example.

The smallest unit of state in the Jotai state management library. An atom holds a piece of state and can be read and written by any component that imports it, without needing a Provider at the top of the tree for simple cases. The concept is inspired by Recoil.

React groups multiple state updates that happen in the same event handler into a single re-render. In React 18, batching was extended to also cover async callbacks (setTimeout, Promise.then) — previously only synchronous event handlers were batched. Batching reduces unnecessary renders and improves performance.

The children prop is a special prop that receives whatever JSX is placed between a component's opening and closing tags. Its type is React.ReactNode, which accepts JSX elements, strings, numbers, arrays, fragments, and null. Components must explicitly declare children in their props interface in modern React + TypeScript.

In React Server Components architecture (Next.js App Router), a Client Component is a component that renders on the client. It can use hooks, event listeners, and browser APIs. Mark a file as a Client Component with the "use client" directive at the top. Without the directive, components are Server Components by default in the App Router.

Splitting the JavaScript bundle into smaller chunks so the browser loads only the code needed for the current page. In React, code splitting is achieved with React.lazy() and dynamic import(). Smaller initial bundles mean faster time-to-interactive for users.

The fundamental building block of React UIs. A component is a JavaScript function that accepts props and returns JSX describing what should appear on screen. Components can be composed together to build complex interfaces from simple pieces.

A set of React 18 features that allow React to pause, interrupt, and resume rendering work. This enables React to keep the UI responsive during heavy renders by prioritizing urgent updates (like typing) over less urgent ones (like data loading). Concurrent Mode is enabled by using createRoot instead of ReactDOM.render.

React Context is a mechanism for passing data through the component tree without explicitly threading it as props at every level. A Provider component wraps a subtree and supplies a value; any descendant can read it with useContext. Context is ideal for values like theme, locale, and current user.

A form element whose value is driven by React state. The component renders the current state value, and the state is updated on every change via an event handler. React owns the data; the DOM reflects it. The opposite is an uncontrolled component.

A JavaScript function whose name starts with use and that calls other hooks internally. Custom hooks let you extract and reuse stateful logic across components without changing the component hierarchy. The logic lives in the hook; the UI lives in the component.

Default values for optional props. In modern React with TypeScript, the idiomatic way to specify defaults is destructuring with default values in the function signature. The legacy Component.defaultProps static property is deprecated.

Code that synchronizes a React component with an external system — a DOM API, a network request, a subscription, or a timer. Effects run after the browser has painted, and they can return a cleanup function that runs before the next effect and when the component unmounts.

React Fiber is the internal reconciliation engine introduced in React 16. It represents every component instance as a lightweight object (a "fiber") in a linked list tree. Fiber enables React to pause, resume, and prioritize rendering work — the foundation for Concurrent Mode and Suspense.

A Fragment (<></> or <React.Fragment>) lets you return multiple elements from a component without adding an extra DOM node. Useful when a wrapper div would break layout (flex/grid children, table rows, etc.).

A function that takes a component and returns a new component with additional props or behavior. HOCs were the primary code-sharing pattern before hooks. Examples include connect from React-Redux (pre-hooks) and withRouter from React Router v4. Custom hooks have largely replaced HOCs in modern codebases.

A function prefixed with use that lets function components "hook into" React features like state and lifecycle. Hooks must be called at the top level of a component or another hook — never inside loops, conditions, or nested functions. The Rules of Hooks enforce this constraint.

The process of attaching React's JavaScript event listeners and state to HTML that was server-rendered. The browser receives pre-built HTML (fast first paint), then React "hydrates" it by reconciling the server HTML with the client-rendered tree. A mismatch between server and client output causes a hydration error.

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup inside JavaScript. Browsers cannot run JSX directly — it is compiled by Babel or TypeScript into React.createElement() calls (or, with the new transform, _jsx() calls from react/jsx-runtime). JSX is not HTML: it uses className instead of class, and all tags must be closed.

A special string or number prop used to uniquely identify elements in a list. React uses keys during reconciliation to determine which items have been added, removed, or reordered. Keys must be stable and unique among siblings. Never use array index as a key for dynamic lists.

Deferring the loading of a component or resource until it is actually needed. In React, React.lazy() combined with Suspense enables component-level lazy loading. Route-level lazy loading is also supported via React Router's and Next.js's built-in dynamic import support.

Moving shared state to the closest common ancestor of components that need it. If two sibling components need to read and update the same value, that value belongs in their parent. The parent passes the state down via props and the updater function as a callback prop.

React.memo is a higher-order component that memoizes a component's render output. If the component's props have not changed (by shallow comparison), React skips re-rendering it. Use it only when profiling shows the component is re-rendering unnecessarily and the cost is measurable.

Short for "properties." Props are the inputs passed from a parent component to a child. They are read-only — a component must never modify its own props. Props are the primary mechanism for data flow in React (top-down, parent to child).

A component that renders the same output for the same props and state and has no side effects during rendering. Pure components are safe to memoize, safe to render multiple times (React 18 Strict Mode does exactly this in development), and easier to reason about.

The algorithm React uses to determine what changed between renders and what minimal set of DOM updates to apply. React compares the previous virtual DOM tree to the new one (diffing), then applies only the differences. The key prop is the primary hint React uses to match old and new elements.

A pure function that takes the current state and an action, and returns the next state. Reducers are used with useReducer for complex state machines. The concept comes from the Redux pattern and functional programming's Array.reduce.

A mutable container created by useRef that persists across renders without causing re-renders when changed. Refs have two main uses: accessing DOM nodes directly (focusing, measuring, animating), and storing mutable values that should not trigger re-renders (timer IDs, previous values).

The process of React calling your component function to get the JSX description of the UI. A render produces a virtual DOM snapshot; React then reconciles it with the previous snapshot to determine DOM updates. Rendering is not the same as painting — React may render without making any DOM changes if the output is identical.

A pattern where a component accepts a function as a prop and calls that function to determine what to render. The function gives the caller full control over the rendered output while the component manages the behavior. Custom hooks have largely replaced render props, but the pattern still appears in libraries like React Final Form and Downshift.

A React component that renders exclusively on the server and sends HTML (or a serialized tree) to the client. Server Components can directly access databases, file systems, and secrets — they never ship their code to the browser. They cannot use hooks or event listeners. Introduced with Next.js App Router and the React 18 RSC spec.

Any operation that interacts with the world outside a function's inputs and outputs: network requests, DOM manipulation, timers, subscriptions, logging. In React, side effects must be isolated in useEffect (or event handlers) — never in the component body during rendering.

Data owned by a component that can change over time and causes a re-render when updated. State is declared with useState or useReducer. Unlike props (which come from the parent), state is private to the component that declares it — though it can be passed down as props.

A development-only tool that wraps your app and activates additional checks. React 18 Strict Mode double-invokes component functions and effects to detect impure renders and missing cleanup. It produces no output and has zero effect in production builds.

A component that displays a fallback UI while its children are loading. Works with React.lazy() for code splitting and with data-fetching libraries that support the Suspense protocol (React Query, SWR, Relay). In React 18, Suspense is used with Server Components and Streaming SSR.

A build optimization performed by bundlers (Vite, webpack, Rollup) that removes unused code from the final bundle. It relies on ES Module syntax (import/export) to statically analyze what is actually used. Write named exports rather than default object exports to enable effective tree shaking.

A form element that manages its own value in the DOM rather than through React state. You access the value via a ref when needed (e.g., on submit). Uncontrolled components are simpler for forms that do not need per-keystroke validation, but controlled components offer more flexibility.

An in-memory representation of the real DOM that React maintains. When state changes, React creates a new virtual DOM snapshot and diffs it against the previous one. Only the differences are applied to the real DOM, minimizing expensive DOM operations. The virtual DOM is an implementation detail of React's reconciler — developers rarely interact with it directly.