ReactGroundworkReact

Step 2 of 2 · your path

React, Intermediate

You know the hooks. Now learn the machinery underneath: refs, context, routing, memoisation, and the fetching patterns that don't race themselves.

Start reading Change levelAll chapters

Your progress

0 / 22 done

Up next

useRef

3 min read · 4 exercises

The way22 chapters

The order I'd read them in

About 1 h 35 min of reading. Tick off what you've read, it is remembered on this device.

  1. useRefA box that survives renders and does not cause them.
    3 min read4 exercises
    4 exercises
  2. Context APIA way to skip the middle layers — not a state manager, and not free.
    3 min read5 exercises
    5 exercises
  3. useReducerWhen the next state depends on the current state and on which thing happened.
    5 min read4 exercises
    4 exercises
  4. Custom hooksSharing stateful logic between components — not sharing the state itself.
    3 min read6 exercises
    6 exercises
  5. Effects in depthStale closures, the dependency array as a contract, and the effects that should not exist.
    5 min read4 exercises
    4 exercises
  6. React RouterThe URL is state your users can bookmark, share and go back to.
    6 min read1 exercise
    1 exercise
  7. State architectureMost React problems are state in the wrong place, in the wrong shape, or duplicated.
    4 min read2 exercises
    2 exercises
  8. Memoisationmemo, useMemo and useCallback are a cache — and a cache you did not measure is a cost.
    6 min read4 exercises
    4 exercises
  9. Error boundaries, portals & keys in depthContaining a crash, escaping the DOM tree, and using keys on purpose.
    3 min read4 exercises
    4 exercises
  10. Data fetching patternsEvery bug in hand-rolled fetching is one of five, and they are all solved problems.
    4 min read5 exercises
    5 exercises
  11. Auth in ReactProtected routes, token refresh, and the redirect that sends people back where they were.
    3 min read2 exercises
    2 exercises
  12. Forms at scaleWhere hand-rolled state stops paying, and what a form library actually buys you.
    3 min read2 exercises
    2 exercises
  13. State management librariesWhat a store gives you that context cannot: selectors.
    5 min read2 exercises
    2 exercises
  14. Server state with TanStack QueryTreat API data as a cache you do not own, and most of your state problems disappear.
    3 min read4 exercises
    4 exercises
  15. Testing ReactTest what a user can do. A test that breaks on a refactor was protecting the wrong thing.
    4 min read2 exercises
    2 exercises
  16. TypeScript with ReactProps are a function's parameters, so typing a component is typing a function.
    5 min read2 exercises
    2 exercises
  17. Animation and transitionsCSS first, a library when you need interruption, and the one case React makes hard.
    6 min read2 exercises
    2 exercises
  18. End-to-end testingThe tests that run the real app in a real browser — and why you want few of them.
    4 min read1 exercise
    1 exercise
  19. InternationalisationTranslating strings is the easy third. Plurals, formats and layout direction are the rest.
    5 min read2 exercises
    2 exercises
  20. File uploadsA file input works without any of your code. Progress, drag and drop and large files are what you add.
    5 min read2 exercises
    2 exercises
  21. Real-time UIPolling, Server-Sent Events or a WebSocket: choose the smallest thing that works, then handle the connection dropping.
    5 min read2 exercises
    2 exercises
  22. shadcn/uiNot a component library you install, but components whose source you copy into your project and own.
    5 min read2 exercises
    2 exercises

Practice64 exercises

Practice at this level

Every exercise opens in the editor with tests you can run.