U
React Guide

Example 5 · 30–35 min

Recursive File Tree

Recursion · Per-node State · Memo · Keys

Senior Level

The Question

"Build a collapsible file-tree component from a nested data structure. Each folder must manage its own open/closed state independently — no lifted state, no prop drilling. Wrap nodes with React.memo so toggling one folder does not re-render its siblings."

recursionper-node stateReact.memostable keysconditional render

Explorer