Updated Sep 29 2019
Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! โจ
In programming, composition allows you to build more complex functionality by combining small and focused functions.
For example, think about using map()
to create a new array from an initial set, and then filtering the result using filter()
:
const list = ['Apple', 'Orange', 'Egg']
list.map(item => item[0]).filter(item => item === 'A') //'A'
In React, composition allows you to have some pretty cool advantages.
You create small and lean components and use them to compose more functionality on top of them. How?
Use an outer component to expand and specialize a more generic component:
const Button = props => {
return <button>{props.text}</button>
}
const SubmitButton = () => {
return <Button text="Submit" />
}
const LoginButton = () => {
return <Button text="Login" />
}
A component can focus on tracking a click event, for example, and what actually happens when the click event happens is up to the container component:
const Button = props => {
return <button onClick={props.onClickHandler}>{props.text}</button>
}
const LoginButton = props => {
return <Button text="Login" onClickHandler={props.onClickHandler} />
}
const Container = () => {
const onClickHandler = () => {
alert('clicked')
}
return <LoginButton onClickHandler={onClickHandler} />
}
The props.children
property allows you to inject components inside other components.
The component needs to output props.children
in its JSX:
const Sidebar = props => {
return <aside>{props.children}</aside>
}
and you embed more components into it in a transparent way:
<Sidebar>
<Link title="First link" />
<Link title="Second link" />
</Sidebar>
When a component receives a component as a prop and returns a component, itโs called higher order component.
You can learn more about higher order components on my article React Higher Order Components.