Recursive Tree Rendering with Memoized Context Resolution

Snippet

Recursive Tree Rendering with Memoized Context Resolution

Recursive components are essential for hierarchical data. Using React.memo ensures that only the toggled branch re-renders, preventing expensive full-tree updates in deep structures.

snippet.js

javascript

interface TreeNodeProps { node: { id: string; label: string; children?: any[] } }
 
const TreeNode = React.memo(({ node }: TreeNodeProps) => {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <div className="tree-node">
      <div onClick={() => setIsOpen(!isOpen)}>{node.label}</div>
      {isOpen && node.children && (
        <div className="children">
          {node.children.map((child) => (
            <TreeNode key={child.id} node={child} />
          ))}
        </div>
      )}
    </div>
  );
});

react

Breakdown

const TreeNode = React.memo(...)

Prevents re-rendering of sibling branches when a specific node's internal state changes.

The component calls itself to render nested levels of the data structure dynamically.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Recursive Tree Rendering with Memoized Context Resolution

Related