You ship React every day. You type <App/> and a tree of UI appears — components nested in components, each one a plain function you wrote. You've never once been asked to describe, field by field, the shape React uses in memory to represent that tree. It's not <App/> itself; that's JSX. It's not the DOM either. There's a layer between them — and if you've made it to a senior interview without touching it, this is the week that changes.

Over the next seven screens we'll rebuild React's render engine from nothing. Every screen hands you a tool you don't have yet and a job that tool can't do. What you invent to get past the wall turns out to be a piece of React — we won't name it until the end.

Start with the first choice. You know the UI renders as a tree, and a tree isn't a JavaScript primitive — you have to PICK a representation. First instinct: each node holds a children array. Parent owns a list of kids; the list owns their lists; recurse down. It works. Until you need to pause the walk.

The native call stack can't be paused. An array index can, but only within one parent: “I was at child 3.” The moment you descend, your position becomes a stack of indices — and when you yield, you have to serialize that stack somewhere. What if position lived ON the nodes themselves? Every node points at its first child, its next sibling, its parent. Now “where am I” is *this node, right here* — one pointer. Pausing costs nothing.