Using Higher Order Components In React

A higher-order component (HOC) is an advanced technique in React for reusing component logic. More info

Articles & Tutorials

How to Convert React Hooks into HOCs for Legacy Components (freecodecamp.org)
Oct 07, 2019
Scenario: You made this beautiful custom hook and you're happily using it in your new function components. You then realize that this custom hook could be used in one of your older class-based components, so you try to use it by dropping it in like so…
  • Rico Kahler
Understanding Higher-Order Components in React (blog.bitsrc.io)
Jun 11, 2019
Your complete guide to higher-order React components.
  • Chidume Nnamdi
How to migrate from HOCs to Hooks (blog.logrocket.com)
May 28, 2019
This article is going to show you two techniques to deal with these situations — creating HOCs from your hooks, and creating hooks from your HOCs.
  • Kristofer Selbekk
How to develop your React superpowers with the HOC Pattern (medium.freecodecamp.org)
Dec 27, 2018
2018 has reached its end and it makes sense for me to start the new year with an article about Higher-Order Components!
  • Eduardo Vedes
Understanding React Render Props and HOC (blog.bitsrc.io)
Aug 23, 2018
A detailed introduction to Render Props and Higher-Order Components in React
  • Aditya Agarwal
Reusing Higher Order Components in React applications with Bit (blog.bitsrc.io)
Aug 20, 2018
Higher order components (HOC) are a great pattern to pull-up reusable code across components to a higher level and reuse it wherever needed.
  • Ramachandran R
Understanding Higher-Order Components in React and Gutenberg (zendev.com)
Jul 24, 2018
In this post we're going to break down one of those architectural patterns that is extremely common in React - higher-order components.
  • Kevin Bal
Render Props, Render Callbacks And Higher-Order Components Are All Interchangeable (medium.com)
Jun 12, 2018
All three mentioned patterns solve the same thing that mixins used to solve.
  • Ali Sharif
Mixing Component Patterns (blog.kentcdodds.com)
May 07, 2018
Let’s make a component that supports Render Props, Component Injection, Compound Components, the Provider Pattern, and Higher Order Components!
Learning Higher-Order Components in React by Building a Loading Screen (medium.com)
Apr 24, 2018
Let me share a secret: no matter how long you’ve been doing something, you’re bound to have to relearn some part of it. I haven’t built my own higher-order component in a long time and made a lot of mistakes. Real mistakes.
  • Peter Piekarczyk
What are Higher-Order Components in React? (css-tricks.com)
Apr 19, 2018
Let’s look at a simple implementation while also trying to explain the core idea. From here you should get a good idea of how they work and even put them to use.
  • Kingsley Silas
Understanding React Higher-Order Components by Example (levelup.gitconnected.com)
Mar 13, 2018
Build a React higher-order component step-by-step to understand how to implement the HOC pattern.
  • Trey Huffine
Higher-Order Components: The Ultimate Guide (medium.freecodecamp.org)
Feb 28, 2018
Not only will you learn how to enhance your presentational components using one or several HoCs, but you’ll also understand the principles behind this pattern.
  • David Kopal
React Component Patterns (levelup.gitconnected.com)
Oct 26, 2017
Stateful x Stateless, Container x Presentational, HOCs, Render Callbacks and more
  • Gustavo Matheus
I’m Breaking up with Higher Order Components (medium.com)
Oct 03, 2017
Writing declarative, readable and flexible React components using render props instead of HOCs.
  • David Atchley
Real world Higher-Order Components (HOCs) (blog.jakoblind.no)
Aug 31, 2017
Trying to wrap your head around React HOCs? Want some real world examples to look at?
Why Higher Order Components Make Sense (medium.com)
Jul 16, 2017
Once you need to combine multiple enhancing components, Higher Order Components standout.
  • Ali Sharif
Simple explanation of Higher-Order Components (HOC) (blog.jakoblind.no)
Jul 13, 2017
Higher-order components are a bit tricky to wrap one’s head around. So in this article we will take it from the beginning and we will keep it simple.
Understanding Higher Order Components (medium.freecodecamp.org)
Jun 01, 2017
Making sense of the rapidly changing React best practice.
  • Tom Coleman
A gentle Introduction to React's Higher Order Components (robinwieruch.de)
Apr 04, 2017
A comprehensive yet easy to understand introduction to higher-order components in React. Higher order components, known as HOCs, are often a difficult to understand pattern in React.js. The article gives you a gentle introduction, how to use HOCs in an elegant way, how to abstract reusable logic and how to use recompose.
Reusable State with Higher Order Components (daveceddia.com)
Mar 28, 2017
Higher-order components are a great way to extract repeated state or lifecycle methods from your React code.
Higher-order Components (engineering.invisionapp.com)
Apr 19, 2016
A Higher-order Component is a function, or component, that wraps around your regular React components allowing you create more reusable code.
  • Matt Vickers

Video Guides & Talks

Convenient Data Fetching with Higher Order Components (youtube.com)
Nov 05, 2018
We'll be showing a small and self-contained data provider library - using higher-order React components and Redux on client side, and requiring zero changes to you backend. We'll also keep our components from worrying about how and when the fetching happens - defining instead only what data is required, while abstracting all of the race-conditions and caching via a single HOC, handling the hard parts.
  • Martin Pinter
Higher Order Components HOC (youtube.com)
Apr 25, 2018
High order Components let you wrap any component in a new component. This lets you share functionality between different components in your app. In this video we build a simple clickLogger to show how it works in principle.
Never Write Another HoC - Phoenix ReactJS (youtube.com)
Sep 17, 2017
Michael Jackson, creator of the React Router library, gives this talk where he says a component with a render prop or children prop as renderer can do anything an HoC (Higher Order Component) can do, and more.
ReactCasts #1 - Higher Order Components (youtube.com)
Oct 23, 2016
In this episode you will learn how to create a HOC and use for changing props and hijacking the render of the wrapped component.
  • Cássio Souza

Courses & Video Series

Advanced React Component Patterns (egghead.io)
Jun 01, 2018
The goal of this course is to give you the knowledge of advanced patterns you can use to make React components that are more flexible, simpler, and more fun to build, use, and maintain.
Advanced React and Redux (udemy.com)
May 30, 2018
Detailed walkthroughs on advanced React and Redux concepts - Authentication, Testing, Middlewares, HOC's, and Deployment.
  • Stephen Grider
Advanced React Component Patterns Workshop @ PayPal (youtube.com)
May 11, 2018
With this course, you'll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need.
Higher Order Components with Functional Patterns Using Recompose (egghead.io)
May 12, 2017
In this course, you will learn to use many of the most powerful and convenient higher-order components within Recompose by coding several real-world examples.
  • Tim Kindberg

Podcast Episodes

The Future of Higher Order Components and Render Props with Paul Gray (devchat.tv)
May 22, 2018
In this episode of React Round Up, the panel discusses the future of higher order components and render props with Paul Gray. They talk about how he got into programming and React, when you would want to use HOCs and render props, and chainable components.
Breaking up with Higher Order Components with David Atchley (devchat.tv)
Apr 17, 2018
In this episode of React Round Up, the panel discuss breaking up with higher-order components with David Atchley. They talk about what higher-order components and render props are and when you would want to use them to help you in your code. They also touch on overuse and misuse of applications and coding tools and the difference between using render props and HOCs.

Libraries

recompose (github.com)13501
v0.30.0
Aug 30, 2018
A React utility belt for function components and higher-order components
react-loadable (github.com)12387
v5.5.0
Aug 09, 2018
⏳ A higher order component for loading components with promises.
  • Jamie Kyle