Skip to content

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'] => 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 = () => {

  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:

  <Link title="First link" />
  <Link title="Second link" />

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.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my React Beginner's Handbook
→ Read my full React Tutorial on The Valley of Code

Here is how can I help you: