Concept lesson · explains an idea. Code is shown for reading, not run.
Short definitions of the terms used in this course, in alphabetical order, with a link to the lesson that explains each one.
Action (React 19): a function passed to a form’s action prop or run in a transition; React tracks its pending state. Form Actions
Batching: React groups several state updates from one event into a single re-render. Updating State
Bundler: a tool (such as Vite) that combines many modules into a few files for the browser. Production Builds
Children: the content placed between a component’s tags, received as the children prop. The children Prop
Client-side rendering (CSR): the browser runs React and builds the page from JavaScript. Single-Page Applications
Component: a function that returns JSX and describes a piece of the UI. Components
Composition: building larger components by combining smaller ones with props and children. Composition
Context: a way to share a value with every component in a subtree without passing props. Context API
Controlled component: an input or component whose value comes from React state and changes through a handler. Controlled Inputs
Custom hook: a function starting with use that reuses stateful logic. Custom Hooks
Declarative: describing what the UI should look like, rather than the steps to change it. React vs DOM Manipulation
Dependency array: the list of values an effect reads; the effect re-runs when one changes. Effect Dependencies
Derived state: a value calculated from other state or props during rendering, not stored. Derived State
DOM: the browser’s live tree of page elements. Virtual DOM
Effect: code that runs after rendering to synchronise with something outside React. useEffect
Error boundary: a class component that catches errors in its children and shows a fallback. Error Boundaries
Event handler: a function called when an event happens, passed to a prop such as onClick. Event Handling
Fragment: a wrapper (<>...</>) that groups elements without adding a DOM node. Fragments
Hook: a function starting with use that lets a component use React features such as state and effects. Rules of Hooks
Hot module replacement (HMR): updating changed modules in the browser without a full reload during development. Dev Server
Hydration: attaching React to HTML that was already rendered on a server. Client-Side React vs Frameworks
Immutability: never changing a value in place; creating a new one instead. Avoiding Mutation
JSX: a syntax extension that lets you write markup in JavaScript. Understanding JSX
Key: a special prop that identifies list items between renders. Keys
Lazy loading: loading code only when it is needed. Lazy Loading
Lifting state up: moving state to a common parent so siblings can share it. Lifting State Up
Memoization: caching a result so it is not recomputed when the inputs are unchanged (memo, useMemo, useCallback). useMemo
Mounting / unmounting: a component being added to or removed from the screen. Cleanup Functions
Prop drilling: passing props through many levels that do not use them. Sharing State
Props: the inputs of a component, passed from its parent and read-only. Understanding Props
Pure function / pure component: given the same inputs, always returns the same output and changes nothing outside itself. Strict Mode
Reconciliation: React comparing the new tree of elements with the old one to find the changes. Virtual DOM
Reducer: a pure function (state, action) => newState. useReducer
Ref: an object { current } that survives renders; used for DOM nodes and mutable values that do not trigger renders. useRef
Render: React calling your component to get a description of the UI. Virtual DOM
Server component: a component that runs only on the server or at build time. Client-Side React vs Frameworks
Single-page application (SPA): one HTML page whose content changes with JavaScript. SPAs
Snapshot: the fixed values (props, state, handlers) of one render. State as a Snapshot
State: data a component remembers between renders; changing it re-renders the component. Understanding State
Strict Mode: a development-only wrapper that runs extra checks. Strict Mode
Suspense: a boundary that shows a fallback while children wait for code or data. Suspense
Transition: a state update marked as non-urgent so the UI stays responsive. Keeping the UI Responsive
Uncontrolled component: an input whose value lives in the DOM and is read with a ref or FormData. Controlled Inputs
Virtual DOM: the lightweight tree of plain objects that describes the UI. The Virtual DOM
Vite: a build tool with a fast dev server and a production bundler. Creating a Project