Learning on Web Dev Open is free for all.

Framework Internals > The App Router, and where the seams areReading a framework from its source
Phase 04The App Router, and where the seams are229 of 434

Reading a framework from its source

The documentation tells you what it does. The source tells you what it actually does, and you can now read it.

Concept16 minAI pair

Start from a symptom, not from the top. You have a behaviour you cannot explain: something re-renders, an effect fires twice, a cache returns something old. Search the source for the string in the warning, or for the public API name, and follow it inwards. Frameworks are large, but the path from one API to its implementation is usually three or four hops.

Read the tests before the implementation. A test file is a specification with examples, written by people who knew the edge cases, and it will tell you what the function is meant to guarantee faster than the function will. Then read the implementation for the parts the tests only imply.

You have an advantage here that most people reading React internals do not: you wrote a diff and a hook system. When you hit the fiber traversal you will recognise your recursive render with an explicit stack. When you hit the hook dispatcher you will recognise your array and cursor. That recognition is the entire reason this phase started where it did.

You should now be able to

  • Find the implementation behind a public API
  • Answer a behavioural question from source rather than a blog post
Ask the community

Loading…