You render a recursive folder tree. To avoid recomputing an expensive derived value for each node on every render, where should the recursion's base case and memoization live?

function Node({ node }) { const size = useMemo(() => computeSize(node), [node]); if (node.children.length === 0) return <File name={node.name} size={size} />; return ( <Folder name={node.name} size={size}> {node.children.map(c => <Node key={c.id} node={c} />)} </Folder> ); }