Glossary · 24 terms

React

Components, hooks, rendering and server components.

Beginner · Students and graduates

Component: The building block of a React app: a JavaScript function that takes props and returns JSX describing what to show. Docs
Props: Read-only values passed into a component like HTML attributes. A component should never change its own props. Docs
State: Values a component keeps with useState. Setting state schedules a re-render with the new value. Docs
JSX: A syntax extension that compiles to function calls creating React elements. Curly braces embed JavaScript expressions. Docs
Hook: Functions like useState and useEffect that let components use state and other features. Call them at the top level only. Docs
Render: Rendering calls your component to get JSX. React then compares it with the last result and updates only what changed in the DOM. Docs
Fragment: Written as <>…</>, it lets a component return several elements side by side without an extra div. Docs
Key: A stable, unique key on each item in a list lets React keep the right state with the right item when the list changes. Docs

useEffect: Runs code after render to connect to external systems, such as subscriptions or timers, with a cleanup when dependencies change. Docs
Context: createContext and useContext let a provider share a value with any component below it, such as a theme or the current user. Docs
Reducer: With useReducer, all the update logic lives in one pure function, which keeps complex state changes predictable. Docs
Memo: memo wraps a component so React reuses the last result if props are equal. useMemo caches a computed value the same way. Docs
Ref: useRef gives a mutable object that persists across renders. It’s used for DOM nodes, timers and other values the UI doesn’t show. Docs
Portal: createPortal renders into another place in the DOM, such as document.body for modals, while staying in the React tree. Docs
Suspense: A boundary that displays fallback content until the components inside it are ready, such as lazy code or data. Docs
Hydration: The client renders the same tree over server HTML and attaches event handlers, so the page becomes interactive without re-creating the DOM. Docs

Fiber: React’s internal data structure for one component instance. Work on fibers can be split, paused and prioritised. Docs
Reconciler: Reconciliation compares the new element tree with the previous one and computes the minimum set of changes to apply. Docs
Transition: startTransition and useTransition mark state updates as interruptible, so urgent updates like typing are handled first. Docs
Actions: Functions passed to a form’s action or run in a transition. React tracks their pending state, errors and optimistic updates. Docs
RSC: React Server Components render ahead of time on the server, can read data directly, and add nothing to the client bundle. Docs
Use: use(resource) reads the value of a promise or a context. Unlike hooks, it can be called inside conditions and loops. Docs
Compiler: React Compiler analyses components and inserts memoization for you, so manual useMemo and useCallback are rarely needed. Docs
Streaming: The server flushes the page shell first and fills in Suspense boundaries as their data resolves, so users see content sooner. Docs