Higher Order Components
Higher order components or HOCs -- what are they? If you're newer to React, you might have heard this term, but not known exactly what it means or how to implement them. At basic level, higher order components are similar to higher order functions in JavaScript. A higher-order component is just a function that takes an existing component and returns another component that wraps it.
This week we are looking at a lot of tutorials and codebases that have a variety of examples and explanations on how to use and create higher order components.
Cheers!
-Sophia Shoemaker
Tutorials
In depth tutorial on Higher Order Components
@franleplant gives us a deeper understanding of higher order components and how to effectively use them in codebases.
medium.com
Andrew Clark's talk from React Europe about Higher Order Components
In this video from React Europe, Andrew gives an overview of high level components and the use cases as well as trade offs. He also covers how optimize for performance when using higher order components.
youtube.com
Redux, Immutability and Higher Order Components
One of the key concepts when using Redux with React lies in a higher order component: connect(). In this article, Jeff Hsu gives a simple explanation of higher order components and then explains how this concept works in Redux.
traintracks.io
Higher Order Components with GraphQL and React
The new version of react-apollo solves a number of difficulties related to combining GraphQL and React using higher order components. This articles goes into detail about how these changes have improved and enhanced the react-apollo codebase. It also includes examples on how to use this library.
medium.com
Function as a Child Components
The "function as a child" pattern is an alternative to the higher order components concept. Function as Child Components are components that receive a function instead of React nodes as children. Rather than including this.props.children, and passing down React nodes, you use this.props.children() instead and pass in parameters to the children() function. This article by Merrick Christensen explains how this pattern works and where and when it is useful.
medium.com
Code
Recompose: A React utility belt for function components and higher-order components
Built by Andrew Clark (see above React Europe talk), this library makes it easier to create and include higher order components in your React codebase.
github.com
Higher Order Components code samples
A gist from Sebastian Markbåge gives some sample examples of how to write higher order components. Be sure to read through the entire gist, as there are several other examples from other members in the community.
github.com
About
Fullstack React: The Book
Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.
fullstackreact.com
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Follow us on Twitter
Curated with love by Sophia Shoemaker, Nate Murray and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.