Photo by Ricky Kharawala on Unsplash

React Higher Order Components in 3 minutes

Grasp this useful pattern to stop repeating logic in React Components! 😎

What are they?

A pattern for when we find ourselves repeating logic across components. They are not part of the React API.

What do they do?

They are functions that take components and return new components!

When to use?

When you’re repeating patterns/logic across components.

Examples;

• hooking into/subscribing to a data source
• adding interactivity to UI (also achieved with wrapper/render props)
• sorting/filtering input data

A Silly Example

We have a Mouse component.

Let’s make it Draggable using GreenSock’s Draggable module.

We add Cat 😺

That needs to be Draggable too ✋ Opportunity for a Higher Order Component(HOC).

Our HOC takes a Component and returns a new Component passing props.

Many HOCs inject new props alongside those passed through. That is often an indicator of whether a HOC is suitable. If we aren’t injecting props, we could likely use a wrapper component or render props.