Intermediate LevelReact JS & React 19
How does passing children as props prevent unnecessary re-renders of expensive child subtrees?
❓ Interview Prompt: Explain Component Lifting, passing JSX via `children` prop, element identity stability, and skipping expensive child renders.
When a parent component updates state, all components defined inside its JSX return statement re-render. However, if a child subtree is created by the top-level caller and passed down via the 'children' prop, its element object identity remains stable across parent state changes, skipping child re-renders completely!
Code Implementation Example
jsx
// Component owning state wraps children
function ColorPicker({ children }) {
const [color, setColor] = useState('#red');
return (
<div style={{ color }}>
<input type="color" onChange={e => setColor(e.target.value)} />
{children} {/* 'children' element identity is stable! Does NOT re-render! */}
</div>
);
}
// Usage:
<ColorPicker>
<ExpensiveTree /> {/* Skipped during color changes! */}
</ColorPicker>;💡Optimizing re-renders by passing expensive component subtrees via children prop.
🎯 Interview Key Takeaway
Pass expensive component subtrees via the children prop to keep their element identity stable during parent state updates.
#Children Prop#Optimization#re-renders#Intermediate
Back to all React JS & React 19 Questions→