React

The Mental Model — UI as a Function of State

JSX — Markup That Is Really JavaScript

Components and Props

Lists and Keys

Handling Events

Rendering and Reconciliation — What Happens on a State Change

Project Structure and Conventions

useState — The Core of Everything

Structuring State — Where It Lives and What Belongs In It

useEffect — Synchronising With the Outside World

Cleanup and Race Conditions

You Probably Do Not Need That Effect

useRef — DOM Access and Values That Do Not Render

useReducer — State With Rules

StrictMode, Purity and Concurrent Rendering

Stale Closures and Update Timing

Fetching Data — And Why It Is Harder Than It Looks

Designing the Loading, Error and Empty States

TanStack Query — Queries, Keys and Caching

Mutations and Optimistic Updates

Pagination, Infinite Scroll and Search

Cache Behaviour — Staleness, Refetching and Invalidation

Authentication in a React App

Real-Time Data in React

Controlled and Uncontrolled Inputs

Validation — Rules, Timing and Messages

React Hook Form

Submission — Pending, Success and Failure

File Upload

Multi-Step Forms and Wizards

React Router — Routes, Links and Layouts

Route Params and Search Params as State

Protected Routes and Authorisation

Lazy Routes, Suspense and Loading Transitions

Navigation Patterns — Scroll, Modals and 404s

Custom Hooks

Context — Sharing Without Prop Drilling

Choosing a State Management Approach

memo, useMemo and useCallback

Error Boundaries

Portals, Modals and Overlays

Designing a Component API

Diagnosing Unnecessary Re-renders

Profiling and Measuring

Shipping Less JavaScript

Perceived Performance

What to Test in a React App

Testing Custom Hooks

Testing Async Behaviour and the Network

Integration Tests — A Whole Feature