React Composition
Tags: react, javascript
Published: 2020-05-02 11:02:30

In a previous post, I [talked about React Context](/react-context), a native alternative to  sharing state like Redux or Mobx, or just to avoiding prop drilling. These other state sharing solutions imply time and effort to set-up and wire the state with your components. On the other hand with prop drilling you get a quick and straightforward solution without setting anything up. And together with this comes a simple, effective, and somehow not known pattern for it: React composition.

This posts motivation comes from a tweet from [@mjackson](https://twitter.com/mjackson) which received many comments giving counter arguments to his idea. In response he decided to do a very nice [explicative video](https://www.youtube.com/watch?v=3XaXKiXtNjw) about react composition which I recommended you watch as well. Now my intention with this post is to aggregate to these concepts exposed previosuly by mjackson without losing the initial reference. So let's continue on.

## What is React Composition

React composition is one of the most basic techniques that we learn when we are working with react. It is mainly the `children` keyword. This example (for learning purposes) illustrates this pattern.

```typescript
import * as React from 'react'

function DisplayCounter ({ children }) {
	return (
		<React.Fragment>
			<h1> My own counter </h1>
			<strong> Press the button and see the counter in action </strong>
			{ children }
		</React.Fragment>
	)
}

function Counter () {
	const [counter, setCounter] = React.useState(0)
	const increase = setCounter(prevCounter => prevCounter +1)
	
	return (
	<React.Fragment>
		<DisplayCounter>
			<p> You have pressed { counter } times </p>
		</DisplayCounter>
		<button onClick={increase}> Increase! </button>
	</React.Fragment>
	)
}
```
&nbsp;

I could have passed the `counter` prop into `DisplayCounter` and would have had no necessity to nest children here but imagine you now have a flow like this:

`Counter (state is set) => anotherComponent => ... => displayCounter (consume states)`.
 As you can see, you are now sending the prop through 2 or more components. It can easily be nested but now all of them have a strong dependency on that prop that they don't even use and are just passing it into the next component.
You could set up a React Context (or any state management library) but this solution is straightforward and gives me the benefit I was looking for.

## Some real example

A header is often a component we can find in many web apps.

![Asset Menu](https://www.rubensuet.com/static/df4b98a38c002ae30e98e689512c09ce/72e01/SBS_asset_menu.jpg)

I need to pass User info into 2 places: The avatar itself, and the settings dropdown.Imagine we got this Tree component

![Asset Tree Component](https://www.rubensuet.com/static/184a6210c021c8f178bc78ee48d6e8c7/72e01/SBS_asset_tree.jpg)
The Header component is taking care to receive user info, and it spreads through the rest of the tree components.

In the classic approach, It would look something like:

```typescript
import * as React from 'react'
import { fetchUser } from './someUtilsLibThatFetchesTheUser'
function Header () {
	const [user, setUser] = React.useState(undefined)
	React.useEffect(()=> {
		setUser(fetchUser())
	},[])
	return(
		<React.Fragment>
			<Avatar user={user} />
			<Menu user={user} >
		</React.Fragment>
	)
}
```
&nbsp;

Not really nice to see so many `user` keywords. Moreover, if you make it with Typescript, you need multiple type definitions for that user object.

The idea here is to avoid prop drilling and make it easy.

```typescript
import * as React from 'react'
import { fetchUser } from './someUtilsLibThatFetchUser'
function Header () {
	const [user, setUser] = React.useState(undefined)
	React.useEffect(()=> {
		setUser(fetchUser())
	},[])
	return(
		<React.Fragment>
			<Avatar>
				<img src={user.avatar} alt={user.username}>
			</Avatar>
			<Menu>
				{ user ? <UserInfo user={user} /> : <LogIn/>
			</Menu>
		</React.Fragment>
	)
}
```
&nbsp;

I am still sending one prop of the user, but now it's a single prop. Before probably would have been

![Asset State flow between components](https://www.rubensuet.com/static/8ad9fc9bd720105e579b55ff02343f2e/72e01/SBS_asset_state.jpg)

The Menu, without composition, would originaly be:

```typescript
import * as React from 'react'

function Menu ({ user }) {
	return (
		<React.Fragment>
			{ user ? <UserInfo user={user} /> : <LogIn />
			<Settings/>
		</React.Fragment>
	)
}
```
&nbsp;

Why, if the Menu does not need anything from the user, does it still need to receive it and pass it into another component?

With Composition, the Menu would like this:

```typescript
import * as React from 'react'

function Menu ({ children }) {
	return (
		<React.Fragment>
			{children}
			<Settings/>
		</React.Fragment>
	)
}
```
&nbsp;

Here relies the power, the previous snippet you could like it more or less (No entendi esta primera oración :S). Depending on your situation you could need React Context or maybe even a more complex library, but sometimes only with Composition could do. This `Menu` snippet, shows us that the component doesn't need to know about the user object, it's not coupled at all. `Children` is as well a really powerful technique for **Compound components**, which I will explain in another post.

So a few more words about it: notice how we passed from sending the User into the Menu component, and from the Menu into the UserInfo component, to avoiding this 'proxy' and just passing the info and delegating it to the parent component, the Header.
For the Avatar, let's assume the component was just some stylings and was waiting for the image. No need to show some snippet there :)

## Conclusion

In my opinion, React Composition is a great tool that can greatly help at the moment of developing. ([React docs are encouraging you to use it](https://reactjs.org/docs/composition-vs-inheritance.html)). If what you put as children is not really huge, Composition is the best technique. Otherwise, if you're children take like 200 lines of code, I would consider another technique like Context. At the end it is just another card in your hand you must learn when it's best to play at a specific moment.


### References for this post

 - [@MJackson tutorial](https://www.youtube.com/watch?v=3XaXKiXtNjw)
 - [React context post](/react-context)
 - [React docs composition VS inheritance](https://reactjs.org/docs/composition-vs-inheritance.html%29)

See the original post at my blog [suetBabySuet](https://www.rubensuet.com/react-composition/)