Composition patterns in real world React
Tags: react, composition, patterns
Published: 2019-01-15 10:02:40

---
title: Composition patterns in real world React
published: true
description: View history of React from the lens of composition. Deep dive into understanding how everything in React revolves around composition.
tags: react, composition, patterns
---

*tldr; In this article we go through a timeline of React from composition point of view*

React has so many ways to do the same thing that sometimes it can be overwhelming and in the quest of being a 10x developer we may miss out on the best way(s) to do something. It's good to be aware of what any pattern is trying to solve and what bargains did the pattern make in achieving something. Understanding this will not only help us with our decision making during the implementation but it has many other benefits as well.

Let's go through the history of React from composition point of view and get an idea of when and why different patterns/features were introduced.

# Timeline of composition in React
- React first got introduced in 2013
- Way to create react component - React.createClass(…)
- Ways of composition: children, mixins
- JSX Namespacing - v0.11 (July 2014)
- Props spreading in JSX - v0.12 (Oct 2014)
- New way to create create react component - ES6 classes.. no mixing in ES6 classes to keep it closer to JS language - v0.13 (Feb 2015)
- DOM node refs, stateless functional components, React.Children.toArray & React.Children.map - v0.14 (October 2015)
- Higher order components pattern officially introduced and mixins considered harmful- (July 2016)
- Render props pattern pushed by influential people, officially included in React docs (2017)
New lifecycles, Fragments, Context API(stable) - v16 - (September 2017 - present)
- Hooks - future

## Now let's get into some detail
### Children
This is the way we've been composing elements even in plain HTML. React just took it further with JSX and applied similar concept with components. This is the most primary way to compose components.

### Mixins
This was like the old school way to composition. They were considered good for quick bootstrapping and was very popular with jQuery. But React team has always been in favour of using functional composition. They even went on to write about [why mixins are harmful](https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html). Anyways this was one of the most popular way to compose with `React.createClass` syntax along with `children` for a long time.

### JSX Namespacing
It just helps if you can group related components under single namespace like this:
```jsx
<Modal>
    <Modal.Header>Title</Modal.Header>
    <Modal.Body>Content</Modal.Body>
    <Modal.Footer>Actions</Modal.Footer>
</Modal>
```

### Props Spreading
After ES6 spread and rest operator came along, React just had to introduce this in JSX as well. It helps so much to pass only concerned props in a hierarchy of components. Consider this hypothetical example:
```jsx
const Page = ({margin, ...props}) => <Box {...props} m={margin} />
```

### React.Children.toArray & React.Children.map
These methods are helpful when you want to do some operations on children in an imperative way. Typically on `componentDidMount`, you may want to loop through all the children and add some prop. However this isn't a very declarative approach as advised in functional paradigm. Also, it places a structural constraint that `.map` only goes through `children` and not the whole sub-tree.

### DOM node refs
This is the `getElementById` of React. You may not need this ever but some rare situations may require you to use refs. React added a better way to add refs in 16.3, React.createRef()

### Higher Order Components and Render-props patterns
Much has been talked about these patterns everywhere so I won't go in detail. Anything that can be done using HOC can also be achieved via Render props and vise-versa. HOC came first, then came its some small disadvantages, which was followed by render-props pattern and then everything was rewritten in render-props. In the end these are just tools. Just pick one which fits your need.

### Context API
Context has been used by libraries like Redux, styled-components, etc which we have been using at work. With the official context API by React in 16.3, it is even easier. Context used along with render-prop/HOC/hooks can produce some of the most beautiful APIs and easy to use components. However, you should be careful while using same context spreaded in the whole application. It should be used in closed scope and the user of your component shouldn't be concerned about what pattern you're using underneath.

### Hooks
This is the future of React patterns. I'm yet to play around with it but it looks very promising. I can easily foresee everything being rewritten in it.

## Conclusion
Having all these methods at one place helps us get a bigger picture of how composition can work in React. It also gives us the ability to pick a composition pattern depending on the problem statement at hand.