Glossary

Every technical term from the tutorial, explained in plain language. In the text these words are underlined with dashes and can be clicked.

React

Batching: React collects several changes and redraws once afterwards, instead of after every single one.
Cleanup: The function you return at the end of an effect, to shut down whatever you started. Stopping a timer or closing a connection, for instance.
Client component: A component that runs in the browser and can therefore use state, hooks and clicks. Marked with "use client" at the top of the file.
Commit: The step where React actually changes the page – after having only worked out what needs to change.
Component: A function that describes what a piece of the interface should look like – a button, or a whole page. It always starts with a capital letter and returns JSX. You then use it like your own HTML element: <MyButton />.
Context: A kind of pneumatic tube: a value goes in at the top and can be taken out anywhere below.
Dependency array: The square brackets at the end of useEffect and friends: the list of values React should watch. If one of them changes, the code runs again. If the list is empty, it runs only once.
Hook: A built-in function whose name starts with “use” and that lends your component an ability – such as remembering something. Hooks may only appear at the top level of a component, never inside an if or a loop.
JSX: The HTML-looking syntax sitting inside your JavaScript, lines like <p>Hello</p>. It is not real HTML. A build tool turns it into ordinary function calls before anything runs.
key: A name tag on list items so React knows which item is which – even when the order changes.
Memoisation: Keeping a result around instead of computing it again. Along the lines of: “as long as the ingredients don't change, the result stays the same”.
Mounting: The moment a component appears on the page for the first time.
Prop drilling: Passing a value down through several components that do not need it themselves.
Props: The values a component receives from the outside – like the arguments of a function. Short for “properties”. They come in from above and must not be changed by the component.
Provider: The component that supplies a context value. Everything inside it can reach that value.
pure: A function is “pure” if it always returns the same thing for the same input and touches nothing else. Your components must be pure while rendering – then React can safely call them more than once.
Re-render: React calls the component function again because something changed. That does not mean the page is rebuilt. If the result is the same as before, nothing changes in the browser at all.
Reconciliation: The comparison between “how it looked” and “how it should look”, from which React works out what to change. During this it also decides which elements to reuse and which to throw away.
Ref: A small note React keeps between renders – changing it does not redraw anything.
Render: React calls your component function and looks at what it returns. Nothing more happens yet. The result is a description (“this is how it should look”). Only afterwards does React decide what actually changes on the page.
Server component: A component that only runs on the server. It cannot use hooks and cannot handle clicks. In Next.js components are server components by default. Adding "use client" at the top of the file makes it a client component.
Shallow comparison: React only checks whether the values are the same on the surface – not whether two objects hold the same contents.
Side effect: Anything that reaches beyond pure calculation: loading something, starting a timer, changing the page title.
State: A value a component remembers and is allowed to change – the text in an input field, for example. When state changes, React redraws the component. That is exactly what separates it from a normal variable.
StrictMode: A checking mode that deliberately runs some things twice during development, to surface bugs early. None of this happens in the published app.
Subtree: A component together with everything inside it. Components nest like folders. A subtree is one folder including all its contents.
Suspense: An area that shows a placeholder (“loading …”) while something inside it is not ready yet.
Unmounting: The moment a component disappears from the page.

JavaScript & browser

Callback: A function you hand to someone else so they can call it at the right moment.
Closure: A function remembers the variables from the place it was written – even when it runs somewhere else later.
Debounce: Only act once things have been quiet for a moment – search after 300 ms without typing, for instance.
DOM: The page as the browser actually holds it in memory – every <div>, every piece of text is an entry there. When React “changes the page”, it changes entries in the DOM.
Immutable: Never change the old thing; always produce a changed copy. In React this is the rule for state.
Mutation: Changing an existing object or array in place instead of creating a new one – with push(), for example.
Object.is: The comparison React uses to decide whether a value changed. It behaves like === (so for objects it compares addresses).
Race condition: Two things run at the same time and whichever finishes first is down to chance – with a different outcome each way.
Reference: For objects and arrays JavaScript stores an address, not the contents. Two addresses differ even when the contents look identical. That is why { a: 1 } === { a: 1 } is false in JavaScript.
Stale closure: A function works with outdated values because it was created in an earlier pass and holds on to the old ones.

TypeScript

Discriminated union: Several variants sharing one identifying field – TypeScript uses it to tell which variant you currently have. For example { status: "loading" } or { status: "error", text: string }. Check status and TypeScript knows which fields exist.
Generic: A placeholder for a type that is only decided when it is used – the <T> in Array<T>.
Inference: TypeScript works out the type by itself, without you writing it down.
Literal type: Not just any string, but exactly this one: "admin" as a type allows only the word admin.
Narrowing: TypeScript narrows a type down when you check it: after if (typeof x === "number") it knows x is a number.
Type: A description of the shape a value is allowed to have – “a string”, or “an object with id and name”.
Union: “One of these”: string | number means the value is either a string or a number.
Utility type: A ready-made helper that builds a new type out of an existing one – such as Partial<T> (all fields optional).

Around it

Bundle: The packaged JavaScript file the browser has to load before your app works.
Hydration: The moment React takes over the HTML delivered by the server and brings it to life in the browser. If that HTML does not match what React would produce in the browser, you get a hydration error.
Linter: A tool that checks your code as you write and points out typical mistakes.
Profiler: A measuring tool in the React DevTools that shows which component took how long.
Server rendering (SSR): The page is produced as finished HTML on the server, so the browser can show something straight away.
Testing Library: A tool that renders a component invisibly and checks whether the right things are in it. That is exactly what runs when you press “Check my answer” in an exercise.
Virtualisation: For very long lists, only actually rendering the rows that are currently visible.

Hirefullstack

Need React firepower on your team?

We have been building React and Next.js applications for clients across Germany for years – as a single expert, as reinforcement for an existing team, or as a complete Scrum team.

Talk about your project →