Component Deep Dive #44: Tree View — Recursive Rendering and Lazy Loading for 10K+ Nodes

Component Deep Dive #44: Tree View — Recursive Rendering and Lazy Loading for 10K+ Nodes

File managers, org charts, category directories, permission menus — any hierarchical data needs a tree view. HTML has no native tree component. While nested <ul> can express hierarchy, it lacks expand/collapse, lazy loading, and multi-select interactions.

The core approach is recursive rendering: renderNode is called recursively inside toggleNode, dynamically creating DOM only when a node is expanded. This avoids rendering the entire tree at once, preventing lag with thousands of nodes.

Lazy loading is handled by checking node.lazy — on first expansion, a loading indicator shows while data is fetched, then children are rendered. Event propagation is carefully controlled with stopPropagation() so arrow clicks don't trigger selection and vice versa.

Key pitfalls: memory leaks from keeping collapsed DOM nodes (use removeChild for large trees), search highlighting requires recursively expanding parent chains, and drag-and-drop across levels needs careful dropEffect handling.

Extensions include tri-state checkbox trees, virtual scrolling for 1000+ nodes, and context menus with node-type-specific items.