javascript / expert
Snippet
Memoized Recursive Tree Rendering
In deeply nested UI structures like file trees, standard reconciliation can be expensive. By combining recursion with custom memoization logic that checks specific version flags, we prevent unnecessary re-renders of entire sub-branches.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const TreeNode = React.memo(({ node }) => {return (<li>{node.label}{node.children && (<ul>{node.children.map(child => (<TreeNode key={child.id} node={child} />))}</ul>)}</li>);}, (prev, next) => prev.node.id === next.node.id && prev.node.version === next.node.version);
react
Breakdown
1
const TreeNode = React.memo(({ node }) => {
Defines a recursive component that calls itself for child nodes.
2
(prev, next) => prev.node.id === next.node.id && ...
Custom comparison function to optimize performance beyond shallow prop checks.