React

Learning path, reference, and ecosystem for React — components, hooks, React 19, and the libraries you reach for around them. Part of the Frontend Roadmap. See also TypeScript for typing components and props, Frameworks for Next.js and the meta-framework layer, Testing for testing what you build, and Security for auth and XSS.

Learn

• React Docs — Official documentation, rewritten around hooks and function components. Start here; everything else assumes it.
• Tutorial: Tic-Tac-Toe — Build a small game in the browser in an afternoon, with no setup. [beginner]
• Thinking in React — Going from a design mockup to a component tree, and deciding where state belongs.
• Learn React — Interactive course taught inside an editor you type into, by Bob Ziroll. [freemium]
• Full Stack Open — University of Helsinki course; part 1 is React from first principles.

Reference

Getting started

• Creating a React App — Official picks for a new app: Next.js, React Router, or Expo. Use one when you need routing and server rendering.
• Build a React App from Scratch — Vite and React for a client-rendered SPA, when a framework is more than the project needs.
• Vite Guide — Scaffolding with npm create vite@latest, the toolchain under most React SPAs today.
• Sunsetting Create React App — Deprecation notice from February 2025. CRA is archived, so skip any tutorial that starts with it.

Core concepts

• Your First Component — Defining, exporting, and nesting the unit everything else is built from.
• Passing Props to a Component — Handing data down, default values, and the props spread.
• Passing JSX as Children — Composition through children, which is React’s answer to inheritance.
• Conditional Rendering — Rendering different markup per branch, without leaking a stray 0 into the page.
• Rendering Lists — Mapping data to elements, and why a key must be stable and not the array index.
• State: A Component’s Memory — What useState holds, and what makes a value state rather than a plain variable.
• Render and Commit — The three steps of every update: trigger, render, commit to the DOM.
• State as a Snapshot — Why a state variable does not change until the next render.
• Updating Objects in State — Replacing instead of mutating, which is the rule rendering depends on.
• Sharing State Between Components — Lifting state to the nearest common parent and passing it back down.
• Preserving and Resetting State — How position in the tree decides what survives a re-render, and how key resets it.

Hooks

• Rules of Hooks — Top level only, from React functions only. Both rules, and the reason each exists.
• useState — Full reference: updater functions, lazy initialisers, and resetting by key.
• Synchronizing with Effects — What an Effect is actually for: syncing with a system outside React, and cleaning up after it.
• You Might Not Need an Effect — The highest-value page in the docs. Read it before writing another useEffect.
• Removing Effect Dependencies — Fixing a dependency array by changing the code, never by deleting the dependency.
• useRef — A value that survives re-renders without causing one, plus refs to DOM nodes.
• useMemo — Caching an expensive calculation between renders. The React Compiler removes most hand-written cases.
• useCallback — The same idea for a function identity, usually paired with memo.
• useContext — Reading a value from the nearest provider above in the tree.
• useReducer — Moving state transitions into one function once useState calls start multiplying.
• Reusing Logic with Custom Hooks — Extracting stateful logic into a hook of your own.
• useHooks — Collection of ready-made, server-safe hooks to read or copy.
• eslint-plugin-react-hooks — Lint rules from the React team that enforce everything above.

React 19

• React 19 — Release post: Actions, the use API, ref as a prop, and document metadata.
• React 19 Upgrade Guide — Breaking changes and codemods for moving an existing app across.
• Actions — Async transitions that handle pending state, errors, and optimistic updates for you.
• useActionState — State, pending flag, and form action from a single hook.
• useOptimistic — Showing the expected result while the request is still in flight.
• use — Reading a promise or a context during render, conditionally and in a loop.
• ref as a Prop — Function components accept ref directly, and forwardRef is on its way out.
• React Compiler — Build-time memoisation that replaces most useMemo, useCallback, and memo.
• React 19.2 — <Activity>, useEffectEvent, partial pre-rendering, and Performance Tracks.

Server Components

• Server Components — Components rendered on the server or at build time, shipping no JavaScript to the client.
• Server Functions — Calling a server-side function from the client without writing an API route.
• Directives — 'use client' and 'use server', the markers between the two worlds.
• Making Sense of React Server Components — The mental model, built from the ground up before any framework syntax.

Practice

• Bulletproof React — Reference architecture for a real application, with the reasoning behind each decision written down.
• reactpractice.dev — Small, focused exercises with worked solutions to check yourself against. [freemium]

Tools

Data fetching

• TanStack Query — Caching, revalidation, and request dedupe for server state. The default choice.
• SWR — Lighter take on the same stale-while-revalidate idea. Pick it if Query is more than you need.
• Fetching Data with Effects — Race conditions, waterfalls, and no caching: why hand-rolled fetching in an Effect goes wrong.

State management

• Managing State — Structuring, lifting, and sharing state with the built-ins. Usually enough on its own.
• Scaling Up with Reducer and Context — useReducer plus context, the built-in answer to app-wide state.
• Zustand — Small hook-based store with no provider and no boilerplate. The default once the built-ins run out.
• Redux Toolkit — Official Redux with batteries included. Pick it for a large team that wants one enforced pattern.
• Jotai — Bottom-up atoms. Pick it when state is many small independent pieces rather than one tree.

Forms

• React Hook Form — Uncontrolled inputs and subscriptions, so typing does not re-render the whole form. The default.
• Zod — Schema validation that infers the TypeScript type, wired in through @hookform/resolvers.
• TanStack Form — Type-safe alternative. Pick it for the same form API across frameworks.
• Form Actions — Passing a function to <form action>, the React 19 way to submit without a library.

Routing

• React Router — The default router; framework mode adds data loading and server rendering on top.
• TanStack Router — Type-safe routes and search params. Pick it when you want the URL fully typed.

Component tooling

• React Developer Tools — Browser extension for inspecting the component tree, its props, and the Profiler.
• Storybook — Develop and document components in isolation, one state per story.

Deep dives

Performance

• Why React Re-Renders — What actually triggers a re-render, and why most of them cost nothing.
• Before You memo() — Two restructurings that beat memoisation, from a React team member.
• memo — Skipping a re-render when props are unchanged, and when that is worth doing.
• lazy — Loading a component’s code the first time it renders.
• Suspense — Declaring a fallback while children load, for code splitting and data alike.
• TanStack Virtual — Rendering only the visible rows of a long list. The default for virtualization.
• react-window — Lighter alternative for fixed-size lists and grids.
• why-did-you-render — Development-only logging of avoidable re-renders and the prop behind each one.

Patterns

• React Patterns — Compound components, render props, higher-order components, and the rendering patterns around them.
• Error Boundaries — Catching a render-time crash in one subtree instead of blanking the page.
• react-error-boundary — Error boundary as a component and a hook, so you never write the class yourself.
• createPortal — Rendering children into a different DOM node, for modals and tooltips.
• React for Two Computers — What Server Components are really solving, from first principles. [advanced]
• Legacy React Docs — Class components and lifecycle methods, for maintaining pre-hooks code.
• Awesome React — Collection of awesome things regarding the React ecosystem.