ReactGroundworkReact

Step 2 of 2 · your path

React, Advanced

Reconciliation, concurrent rendering, Server Components, and the patterns behind every component library you've ever imported.

Start reading Change levelAll chapters

Your progress

0 / 23 done

Up next

Fiber

7 min read · 2 exercises

The way23 chapters

The order I'd read them in

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

  1. Reconciliation & FiberRender is a pure, interruptible calculation. Commit is a synchronous mutation. Everything follows from that split.
    7 min read2 exercises
    2 exercises
  2. Concurrent featuresTelling React which updates can wait — so the urgent one never queues behind them.
    6 min read2 exercises
    2 exercises
  3. Suspense & code splittingDeclaring where a loading state lives, instead of threading one through every component.
    6 min read2 exercises
    2 exercises
  4. Server ComponentsComponents that run once, on the server, and ship no JavaScript at all.
    7 min read2 exercises
    2 exercises
  5. Server ActionsA function that runs on the server, called from the client, with no API route in between.
    6 min read2 exercises
    2 exercises
  6. The use() hookReading a promise or a context during render — and the only hook that breaks the rules.
    5 min read2 exercises
    2 exercises
  7. Rendering strategiesWhere the HTML is produced, and when — the decision that shapes everything downstream.
    6 min read2 exercises
    2 exercises
  8. Effect timingFour hooks that all run 'after render', at four different moments.
    4 min read2 exercises
    2 exercises
  9. useSyncExternalStoreThe correct way to read state that lives outside React.
    5 min read2 exercises
    2 exercises
  10. Refs in depthForwarding, imperative handles, and integrating libraries that own their own DOM.
    4 min read2 exercises
    2 exercises
  11. Advanced component patternsThe four shapes behind every component library you have imported.
    3 min read5 exercises
    5 exercises
  12. Performance workMeasure, find the actual cost, fix the structure. Memoisation is the last step, not the first.
    4 min read3 exercises
    3 exercises
  13. AccessibilitySemantics first, keyboard second, ARIA last — and focus management is the part React makes harder.
    4 min read4 exercises
    4 exercises
  14. Design systemsConstraints that make the common thing easy and the inconsistent thing hard.
    3 min read2 exercises
    2 exercises
  15. Advanced TypeScript with ReactMaking the wrong call fail to compile, rather than fail in review.
    5 min read2 exercises
    2 exercises
  16. Architecture at scaleOrganising by feature, drawing boundaries, and the decisions that are hard to reverse.
    4 min read2 exercises
    2 exercises
  17. Custom renderersReact is not a DOM library. The DOM is one target among several.
    3 min read2 exercises
    2 exercises
  18. Migrating and upgradingNobody rewrites a working application. The skill is moving it while it keeps shipping.
    5 min read2 exercises
    2 exercises
  19. Debugging in productionThe bug is on someone else's device, on a network you cannot reproduce.
    4 min read2 exercises
    2 exercises
  20. Reviewing React, and knowing when not to use itAt this level you are judged on what you notice in someone else's code, and on what you argue against.
    6 min read2 exercises
    2 exercises
  21. State machines and XStateWhen a screen has modes, list the modes and the events each one accepts, instead of guessing from booleans.
    5 min read2 exercises
    2 exercises
  22. Feature flagsDeploying code and releasing it are different decisions, and a flag is what separates them.
    5 min read2 exercises
    2 exercises
  23. React interview bankForty-six questions split by level, and twenty output drills.
    20 min read2 exercises
    2 exercises

Practice49 exercises

Practice at this level

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