Reference · 37 terms
Glossary
Every short form used across the series. Inside a lesson, hover or tap any dotted term to see the same entry in place.
React model
- batchingBatching
- React groups several state updates from one event into a single re-render.Lesson 0 →
- commit phaseCommit phase
- React applies the smallest DOM changes. Then it runs layout effects (before paint) and passive effects (after paint). It cannot be interrupted.Lesson 0 →
- FiberReact Fiber
- React's inside tree of work units. It lets React pause rendering, and it lets state belong to a place in the tree.Lesson 0 →
- reconciliationReconciliation
- How React compares the new tree of elements with the old one, using type and key. It decides what to update, keep or remount.Lesson 0 →
- render phaseRender phase
- React calls your components to work out the next UI. It must be pure (no side effects), because React may repeat it or throw it away.Lesson 0 →
- stale closureStale closure
- A function that keeps seeing old values, because it captured them in an earlier render. Missing effect dependencies often cause it.Lesson 1 →
- useEffectuseEffect
- Runs after render to connect a component to something outside React, like a subscription, timer or network request. It needs cleanup.Lesson 1 →
- useLayoutEffectuseLayoutEffect
- Like useEffect, but it runs after DOM changes and before the browser paints. Use it to measure layout without flicker.Lesson 1 →
- useReduceruseReducer
- State changed by a pure function (state, action) => state. Good for complex changes.Lesson 1 →
- useRefuseRef
- A box you can change that survives renders and does not cause a render. Use it for DOM nodes, timer IDs and 'latest value' holders.Lesson 1 →
Modern React
- hydration mismatchHydration mismatch
- The first render in the browser is different from the server HTML. Dates, random values or browser-only APIs in render often cause it.Lesson 2 →
- RSCReact Server Components
- Components that run only on the server and send no JavaScript to the browser. They can read data directly.Lesson 2 →
- Server ActionServer Action
- A function marked "use server" that runs on the server but can be called from the client. It is a public endpoint, so it needs auth and validation.Lesson 2 →
- streamingStreaming SSR
- The server sends the HTML shell at once. Slower Suspense parts arrive later, when they are ready.Lesson 2 →
- SuspenseSuspense
- A React wrapper that shows a fallback while something inside it (code or data) is still loading.Lesson 2 →
- use client"use client" directive
- Marks a file as the start of the client bundle. It and everything it imports run in the browser.Lesson 2 →
- useTransitionuseTransition
- Marks a state update as not urgent. React renders it in the background and lets urgent input go first.Lesson 2 →
State
- selectorSelector
- A function that picks the part of a store a component needs, so other changes do not re-render it.Lesson 3 →
- server stateServer state
- Data that lives on the server and is only copied into the UI. It needs refresh, dedupe and invalidation. Use TanStack Query or SWR.Lesson 3 →
- TanStack QueryTanStack Query (React Query)
- A library that saves server data by query key. It also dedupes, refreshes and updates it.Lesson 3 →
- ZustandZustand
- A tiny store library. Components pick a slice with a selector and re-render only when that slice changes.Lesson 3 →
TypeScript
- discriminated unionDiscriminated union
- A union where every variant has a tag property with a fixed value. Checking the tag narrows the type and lets you check all cases.Lesson 4 →
- genericGeneric
- A type parameter. One function or type then works for many types and keeps the link between them.Lesson 4 →
- narrowingType narrowing
- TypeScript makes a value's type more exact inside a branch, after a check like typeof, in or a tag comparison.Lesson 4 →
- satisfiessatisfies operator
- Checks a value against a type but keeps the exact inferred type.Lesson 4 →
- unknownunknown
- A safe type for a value you know nothing about. You must narrow or validate it before use. Prefer it to any.Lesson 4 →
- ZodZod
- A TypeScript-first schema library. One schema checks data at run time and also gives you the static type with z.infer.Lesson 4 →
Testing and accessibility
- accessible nameAccessible name
- The text a screen reader says for a control. It comes from its label, content or aria-label.Lesson 6 →
- ARIAAccessible Rich Internet Applications
- Attributes that add accessibility meaning that HTML cannot express. They change what is announced, not what the element does.Lesson 6 →
- focus trapFocus trap
- Keep Tab and Shift+Tab inside a modal while it is open. The native dialog element does this for you.Lesson 6 →
- live regionARIA live region
- An element whose changes a screen reader announces: role="status" (polite) or role="alert" (urgent).Lesson 6 →
- MSWMock Service Worker
- Catches network requests in tests (and dev), so real components run against fake responses.Lesson 5 →
- PlaywrightPlaywright
- A browser automation tool for end-to-end tests. Its locators wait by themselves, and its assertions wait for the page.Lesson 5 →
- snapshot testSnapshot test
- A test that saves the output and fails when it changes. Good for small stable values, noisy for big DOM trees.Lesson 5 →
- storageStatePlaywright storageState
- Saved cookies and local storage from a login. Tests reuse it, so they start logged in without the login screen.Lesson 5 →
- Testing LibraryTesting Library
- Tests components the way users meet them: find by role, label and text, and interact with user-event.Lesson 5 →
- WCAGWeb Content Accessibility Guidelines
- The standard for accessible web content. Level AA asks for 4.5:1 text contrast, keyboard use and more.Lesson 6 →