7 recursive components

What this module drills

Drawing a tree of unknown depth out of three small components — a router that looks at one node and picks who draws it, a walker that draws a branch and hands each child back to the router one level deeper, and a leaf that draws and stops. That is the easy half. The hard half is where state lives once a component renders itself: a skill tree with sixty leaves is still one function, and every one of those leaves has to remember its own rank.

Why it bites

A component is a stamp, not a thing. Every place it renders is a separate instance with its own hook slots, and nothing written at module level knows that — one let open = true outside the function is a single flag shared by the whole tree, so collapsing one branch collapses all of them. Koan 01 ships that bug on purpose.

Then it bites from the other side. Unmounting an instance destroys its hook state permanently, so a branch that renders {open && children} throws away everything its children knew the moment it closes. And key={index} names the slot rather than the skill sitting in it, so a reordered list leaves each instance — and its rank — where it was while different data slides underneath.

Order

01 and 02 are the shape: one stamp, many instances, then router, walker, leaf with depth + 1. 03 and 04 are the two ways state goes missing — wrong key, and unmount — and 04 is where the flags move out of the leaves into one store the parent owns. 05 is the capstone: position + key + type is the whole address rule, and when you can call all three of its buttons in advance, you have the module.