Glossary

113 terms from React Beyond the Basics, in plain words, each with the chapter that teaches it.

Search the glossary

#

"use client": A directive that marks a file and everything it imports as client code. Server components may render client components, but not the other way round.

A

action: A plain object describing what happened, such as { type: "removed", sku } in Kettle & Crane's cart. It is sent with dispatch to a reducer.
aria-describedby: An HTML attribute that points to the id of an element describing a field, so a screen reader reads the error message together with the field. Checkout uses it to link each input to its error text.
aria-invalid: An HTML attribute that tells assistive technology a field's value is wrong. Checkout sets it on a field that has an error, and CSS can also use it to draw a red border.
async: Keywords for code that waits for something slow, such as a server answer. An async function can use await to pause until a promise gives its result.

B

BrowserRouter: The React Router component that connects the app to the browser's address bar. It must wrap everything that uses routing.
bundler: A build tool, such as Vite, that combines your code into files for the browser. With server components it must also split the code into server and client parts.

C

cache: TanStack Query's store of fetched answers, kept under query keys. Components that ask for the same key share one entry and one request.
class component: An older style of writing React components as JavaScript classes instead of functions. React's built-in way to write an error boundary still requires a class component, so libraries such as `react-error-boundary` are often used to avoid writing one.
client component: A component whose code is downloaded and runs in the visitor's browser, so it can use state, effects, context and click handlers. In a plain React app such as a Vite project, every component is a client component.
client-side routing: Showing a different page component when the address changes, without loading a page from the server. State therefore stays in place between pages.
code splitting: Breaking an app's JavaScript into several files that load only when needed. For example, the Checkout file is downloaded only when someone opens /checkout.
component library: A ready-made set of accessible components, such as menus, dialogs and date pickers. Teams use one because building keyboard- and screen-reader-friendly widgets is weeks of work.
Components tab: A tab that React Developer Tools adds to the browser's developer tools. It can flash a border around components as they render and shows a "Memo ✨" badge on ones the React Compiler optimized.
console.count: A browser console function that prints a label along with how many times it has been called with that label. It is a quick way to see how often a component renders.
context: A way for a parent to offer a value that any component inside it can read directly, without passing props. Kettle & Crane uses it to share the cart.
create (Zustand): The Zustand function that builds a store from a function receiving `set` and returning the starting state. It gives back a custom hook such as useUi.
createContext: The React function that creates a context, taking a type argument and a default value. The default is used only when no provider is above.
custom hook: A function whose name starts with `use` and that calls other hooks, so you can reuse hook logic. It shares logic, not state: each call gets its own state and effects.

D

default export: A module's single main export, imported without curly braces. `lazy` needs a default export, which is why the project's pages use it.
defaultValue: An input's starting value. In the checkout it comes from the returned state, so React's form reset puts back what the user typed.
dependencies: The array of values passed to useMemo or useCallback (like an effect's array). The result is recalculated only when one of them changes, so leaving one out gives an old result.
directive: A string on the first line of a file, such as "use client", that tells the bundler how to treat that file.
discriminated union: A union of object types that each have a `type` field with a different value. TypeScript narrows to the right member in each `case`, as with CartAction.
dispatch: The function returned by useReducer that sends an action to the reducer. React then runs the reducer and re-renders with the new state.
dynamic import: `import("./Checkout.tsx")` with brackets loads a file at that moment and returns a promise. `lazy` uses it to split code.

E

error boundary: A component that catches errors thrown while rendering anything inside it and shows a fallback instead of that part of the page. This keeps one broken widget from blanking Kettle & Crane's whole page.

F

fallback: What an error boundary or Suspense shows instead of the broken or still-loading part of the page.
fetch: The browser function that sends a request to a server and returns a promise for the response. It rejects only when the network fails, not when the server answers with an error status such as 404 or 500, so code should check `response.ok`.
form action: A function passed to a form's `action` prop. React calls it with the form's FormData on submit, stops the page reload and then resets the form.
FormData: The browser's object holding a form's fields by `name`. `formData.get("email")` returns that field's value.

G

gzip: A compression format that makes files smaller to download. The build output lists each file's gzip size.

H

headless: A component library that gives behavior and accessibility but no styles, such as Radix, React Aria or Base UI. Choose it when you have your own design.
HTTP status codes: Numbers a server sends with its answer: 400 means a bad request (the order's problems), 404 means not found and 500 means a server error.

I

import type: A way to import something that exists only as a type. The react-ts template requires it because types vanish when the code runs.
index route: The child route shown at its parent's own address, such as the shop list at `/`.
initializer: The optional third argument of useReducer, a function React calls once to build the first state. The cart uses loadCart to restore saved lines.
instanceof: A JavaScript check that tests whether a value is an object of a given kind. `error instanceof Error` narrows an `unknown` thrown value so you can read `.message`.
interface: A TypeScript way to name the shape of an object, such as Product or a component's props.
invalidating: Marking cached data stale so TanStack Query fetches it again if it is on screen. After an order, Kettle & Crane invalidates the products so the stock refreshes.

J

Jotai: A store library that builds state from small pieces called atoms.
JSON: A text format for sending data. JSON.stringify turns an object into JSON text and JSON.parse turns it back, returning type `any`.

L

layout route: A route with an element but no path that draws shared parts, such as the header, around whichever child route matches at its Outlet.
lazy: A React function that takes a function importing a module and returns a component that loads it on first render. It needs a default export and a Suspense above it.
Link: A React Router component that renders an `<a>` but changes the address itself without reloading the page. Use it instead of `<a href>` for your own pages.
localStorage: Browser storage that keeps text between visits. The cart is saved there under "kc-cart" so it survives a reload.

M

memo: A wrapper that makes React skip re-rendering a component when its props are the same as last time. "The same" means each prop is `===` the old one.
MUI: A styled component library with ready-made, themed components. Choose it when you want a complete look fast.
mutation: A request that changes data on the server, such as placing an order, sent with useMutation. Its mutate function runs the change and isPending prevents ordering twice.

N

narrowing: TypeScript working out a more specific type from a check, such as inside a `case` or after an `if`. It is how `data` becomes `Product[]` after the loading and error checks.
NavLink: A Link that adds the class `active` when its address is the current one, so CSS can highlight it. `end` limits it to an exact match.
nested routes: Routes placed inside another route, whose paths add to the outer route's path.
Node.js: A program that runs JavaScript outside the browser. Its LTS (long-term support) version is the stable release used to run tools such as npm, Vite and small local servers.
npm: The package manager that comes with Node.js. `npm install` adds libraries, `npm run dev` starts the dev server and `npm run build` type-checks and builds the app.

O

Outlet: The React Router component that marks where the matching child route's element appears inside a layout.

P

practice server: A small Node.js server, run with `node server.mjs`, that provides `/api` endpoints for products and orders so the example shop has real data to fetch and send. It runs in a second terminal alongside the development server, which proxies `/api` requests to it.
Profiler: The React Developer Tools tab that records renders. You click record, use the page, stop, and see which components rendered, how long each took and why.
promise: A JavaScript object standing for a result that will arrive later. A dynamic import and fetch both return promises.
prop drilling: Passing a value down through many layers of components just so a deep one can use it. Context avoids it.
provider: The component that supplies a context's value to everything inside it, such as CartProvider or QueryClientProvider.
proxy: A setting in vite.config.ts that forwards requests starting with /api from the dev server to the practice server at localhost:8080.
pure function: A function that only builds and returns its result and does nothing else, such as fetching or saving. A reducer must be pure and must not change the old state.

Q

query key: The array, such as ["product", sku], that names a query's cached data. It must include every value the query depends on, and a key matches every query that starts with it.
QueryClient: The object that holds TanStack Query's cache. You make one for the whole app, provide it with QueryClientProvider and reach it in components with useQueryClient.
querySelector: A browser method that returns the first element inside another that matches a CSS selector. The checkout uses it to find the first field marked aria-invalid and focus it.

R

re-render: React running a component's function again. It happens when the component's own state changes, its parent re-renders, or a context it reads changes.
React Compiler: A build tool that automatically adds memoizing, as if you had used memo, useMemo and useCallback wherever it is safe. Components it optimized show a "Memo ✨" badge.
React Developer Tools: A browser extension that adds Components and Profiler tabs to the developer tools so you can inspect and measure a React app.
React Router: The most widely used library for client-side routing in React, which shows a different component for each address without reloading the page. In version 8 everything is imported from `"react-router"`.
React Server Components: Components that run on the server, or once at build time, and send only their rendered output to the browser. They need a framework and a bundler that splits the code in two.
react-error-boundary: A library that lets you write error boundaries without a class component. It provides ErrorBoundary, FallbackComponent and resetErrorBoundary.
react-ts template: Vite's starter project for React with TypeScript. Files with JSX end in .tsx.
ReactNode: React's type for anything you can put between tags or render, used to type `children`.
readJson: A helper function in `api.ts` that parses a fetch response as JSON and throws an `Error` if `response.ok` is false. Query functions must throw on errors so TanStack Query can report them.
reducer: A pure function that takes the current state and an action and returns the new state. Kettle & Crane's cart rules all live in one cartReducer.
Redux Toolkit: A store library common in large, older React apps.
ref: A box made with useRef that holds a value between renders without re-rendering when it changes. Put `ref={r}` on an element and React stores the page element in `r.current`.
regular expression: A pattern for matching text. The zip check /^\d{5}$/ means exactly five digits from start to end.
resetKeys: A list of values on an error boundary: when any changes, the boundary clears its error and tries again. The layout uses the current pathname so that navigating recovers from a crash. (resetErrorBoundary, by contrast, is the function a Try again button calls.)
response.ok: A property of a fetch response that is `true` when the status code signals success (200–299). Code checks it because `fetch` does not fail on a 404 or 500 answer.
route: A rule matching an address pattern to the component it shows. `Routes` renders the Route that best matches the address.
Routes: The React Router component that renders the Route best matching the current address.
rules of hooks: Call hooks only at the top level of a component or custom hook, never inside `if`, loops or handlers. Breaking this makes React report a change in the order of hooks.

S

screen reader: Software that reads a page aloud for people who can't see it. Accessible errors link messages to fields so it announces them.
search parameters: The ?key=value part of an address, as in /?q=mug. Keeping the search term there means a reload or shared link shows the same results.
selector: A function passed to a Zustand store hook that picks the part of the state a component needs. The component re-renders only when that selected value changes.
server component: A component that runs on the server or at build time, can be async and read data directly, and sends only its output to the browser. It can't use state, effects, context or event handlers.
server functions: Functions marked "use server" that run on the server and that client code can call, so a form can use one directly instead of fetch. They can cross the client boundary.
server state: Data that lives on the server, such as products and stock, of which your app holds a copy that can go out of date. TanStack Query manages it.
shadcn/ui: A copy-in component library: its component source is copied into your project and styled with Tailwind CSS, so you own and edit the code. It builds on a headless library.
stale: Cached data that might be out of date and will be refetched in the background. By default it is stale at once, and staleTime sets how many milliseconds it stays fresh.
store: Shared state that lives outside React's component tree, where components subscribe to the parts they need. Zustand makes one.
StrictMode: A React wrapper that turns on extra development-only checks, including rendering every component twice to expose mistakes. As a result, render counts logged in development appear doubled.
Suspense: A React component that shows a fallback while a lazy component loads.

T

Tailwind CSS: A CSS styling tool that shadcn/ui components use for their styles.
TanStack Query: A library that fetches, caches and refreshes server state, retries failures and shares answers between components.
tsc: The TypeScript compiler, which checks types. `npm run build` runs `tsc -b` first, so the build stops at any type error.
type argument: A type written in angle brackets, as in `useState<CartLine[]>([])`, that tells TypeScript what a value will hold when it can't infer it.

U

unknown: A TypeScript type for a value you know nothing about, such as a caught error. You must narrow it, for example with instanceof, before using it.
unmount: React removing a component from the page. An uncaught render error unmounts the whole app.
URL parameter: A named part of a path, such as :sku in products/:sku, that matches any value and is read with useParams.
useActionState: A React hook that keeps a form action's result as state and returns [state, formAction, isPending]. The action receives (previousState, formData) and returns the next state.
useCallback: A hook that gives back the same function until a dependency changes. It keeps memo's function props stable.
useContext: A hook that reads the value of the nearest provider of a context.
useFormStatus: A hook from react-dom that tells a component inside a form whether that form is being sent. Kettle & Crane's SubmitButton uses its `pending` value.
useLocation: A React Router hook that returns the current address. Its pathname is the part like /products/MUG-BL.
useMemo: A hook that keeps a calculated result and recalculates only when a dependency changes.
useNavigate: A React Router hook that returns a function for changing the address from code, such as moving to /cart after Add to cart.
useQuery: A TanStack Query hook that fetches data and keeps it in the cache, given a queryKey and a queryFn. It returns data, isPending and error.
useReducer: A hook that takes a reducer and an initial state and returns the state and a dispatch function.

V

validation: Checking input before using it. Browser checks give fast, friendly messages, while server checks keep the data safe, so you need both.
Vite: A build tool and development server for front-end projects. In development it strips TypeScript types and serves the app quickly, and it also builds the app into optimized files for release.

Z

Zustand: A small store library for React where components subscribe to parts of the store with selectors.