javascript / intermediate
Snippet
Avoiding Prop Drilling with Component Composition
Component composition allows you to pass components as props (like 'children' or custom slots), avoiding the need to pass data through multiple intermediate layers.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
const Layout = ({ children, sidebar }) => (<div className="container"><aside>{sidebar}</aside><main>{children}</main></div>);// Usage<Layout sidebar={<Navigation />}><DashboardContent /></Layout>
react
Breakdown
1
const Layout = ({ children, sidebar }) => (
Uses 'children' and 'sidebar' slots for flexible rendering.
2
sidebar={<Navigation />}
Passes a component directly into a slot instead of deep data props.