React

Full outline

A deep path through React: the rendering model, hooks used correctly, Server Components, state architecture, performance, and testing — with the mental models that make the whole thing click.

1. 01The Core Model

   UI as a pure function of state.

   • JSX & components

     Components are functions returning a description of UI — not templates, not classes.

   • State & props

     Props flow down, events flow up. Everything else is a variation on that.

   • The render model

     Why a component re-renders, and what React does with the result.

   • Thinking in React

     Breaking a design into a component tree and deciding where state belongs.

2. 02Hooks

   Powerful, and easy to overuse.

   • useEffect, carefully

     Effects synchronise with external systems. Most code written in effects belongs somewhere else.

   • Refs & imperative escape hatches

     For DOM measurement, focus, timers and values that must not trigger renders.

   • Memoisation

     useMemo, useCallback and React.memo — measure before you reach for them.

   • Custom hooks

     Extracting stateful logic so it can be reused and tested independently.

3. 03Modern React

   Server Components changed the defaults.

   • Server Components

     Components that run on the server, fetch data directly, and ship no JavaScript.

   • Suspense & streaming

     Declarative loading states, streamed from the server as data resolves.

   • Actions & transitions

     Mutations without hand-rolled loading state.

4. 04Architecture

   What separates a demo from a codebase.

   • State architecture

     Server state and client state are different problems and want different tools.

   • Component patterns

     Composition patterns that keep components flexible without prop explosions.

   • Performance

     Profile first. The bottleneck is rarely where you assume.

   • Testing

     Test what the user experiences, not internal state.