React

The mental model behind React 19 — what a render is, why state is a snapshot, when effects run, and the reconciliation, memo and race-condition questions interviews keep returning to.

Start the course Practise this with real questions

In this course

Components, props and JSXJSX is a function call that builds a plain object, a component is a function from props to those objects, and 0 is the one falsy value React still prints.9 min
useState: state is a snapshotWhy count + 1 three times adds one, how React batches every update in an event into one render, and when to pass an updater function instead of a value.10 min
Updating objects and arrays in stateReact compares old and new state with Object.is, so a mutated object looks unchanged. How to copy only the path you change, for objects and arrays.9 min
useReducer: state changes as a pure functionA reducer turns (state, action) into the next state. Why it must be pure, why it is named after Array.reduce, and when it beats several useState calls.9 min
Rendering and reconciliationWhat triggers a render, what render and commit each do, and the rule that decides whether a component keeps its state - same type in the same position.11 min
Keys and listsA key tells React which item is which between renders. Why index keys move state onto the wrong row, what makes a good key, and using a key to reset a component.9 min
useEffect: dependencies and cleanupAn effect synchronises a component with something outside React. How the dependency array is compared, when cleanup runs, and why Strict Mode runs setup twice.11 min
When not to use an effect, and stale closuresMost effects that set state from props or state are an extra render waiting to happen. What to do instead, and how an effect ends up reading old values.10 min
useRef: values that survive without renderingA ref is a box that keeps its value between renders and never triggers one. How that differs from state and a local variable, and how refs reach DOM nodes in React 19.10 min
Forms and controlled inputsControlled inputs make state the single source of truth. One change handler for many fields, why checkboxes and number inputs trip people up, and React 19 form actions.10 min
Context and prop drillingContext lets a component read a value from the nearest provider above it without threading props through every level. How lookup works, and why a new object value re-renders every reader.10 min
useMemo, useCallback and memomemo skips a child's render when its props are shallowly equal, and useMemo and useCallback keep props equal. How the comparison works, when it helps, and when it is wasted.11 min
Custom hooks and the rules of hooksA custom hook shares stateful logic, not state. Why React identifies hooks by call order, and what breaks when a hook is called conditionally.10 min
Data fetching, race conditions and SuspenseFetching in an effect has a race - a slow old response can overwrite a fast new one. How cleanup fixes it, and how Suspense and use() move loading states out of components.12 min
Error boundariesWithout a boundary, one component throwing during render unmounts the whole app. What a boundary catches, what it never sees, and how to recover.10 min
Testing with React Testing LibraryTest what a user can see and do, not component internals. The query priority, the difference between getBy, queryBy and findBy, and simulating input with user-event.11 min