React Concept: Composition
New Course Coming Soon:
Get Really Good at Git
What is composition and why is it a key concept in your React apps
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?
Create specialized version of a component
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" />
}
Pass methods as props
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} />
}
Using children
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>
Higher order components
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.
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X