💯 UPDATED: Advanced React Component Patterns ⚛️
Now featuring the latest React APIs (like context) and entirely new patterns (like state reducer props).
My highly popular course has been updated (completely re-recorded) and you can find it here:
Here's the intro:
ALSO! You can follow along in codesandbox right here:
So what's new?
This course was originally published in December 2017. A few months after it was published, React 16.3.0 was released with some new APIs that really improved the usability of React for some of these patterns.
Compound Components + Context API = ❤️
In particular, the Context API makes compound components much easier to make more flexible:
I also have a few extra lessons to show you how you can validate that your Context Consumers are used properly:
And here's another that shows you how to properly use the Context Provider to avoid unnecessary re-renders of your consumers:
The render prop lessons have also been re-recorded, though no new React APIs were needed to make it remain an awesome pattern 😉 People have told me that they really appreciate the way I teach render props:
In the last course we had control props, but I've taken it further in this update to have more lessons about this subject and simplified the examples while making the implementation more real-world as well so you can focus on learning how to effectively use the pattern:
The Provider Pattern
Last time, we had quite a few lessons about the provider pattern. With the new Context API, I was able to show everything in a single lesson because the Context API is a built-in implementation of the provider pattern! In this lesson I give a demonstration of what Prop Drilling is and how the Provider Pattern can simplify things considerably making your React codebase much more manageable.
Higher Order Components
React 16.3.0 published a new API called React.forwardRef that simplified creating Higher Order Components (HOCs) in a big way. In this lesson you'll learn how to use that effectively. While everyone out there is all hyped up on render props (your's truly included), higher components do still have a place and value in the discussion of react patterns. This lesson is built on top of the provider pattern lesson so you can see how to turn a Context Consumer into a Higher Order Component.
Now go watch it!
Thanks so much for all the support with all this content. This time around it's 20 minutes shorter than last time (despite having a few extra lessons for an entirely new pattern) because React keeps getting better at enabling these patterns. I hope you love it!
Please share this blog post and the course link with your friends!
I just published “💯 UPDATED: Advanced React Component Patterns ⚛️” https://t.co/7iiCTP8RZg— Kent C. Dodds 🧢 (@kentcdodds) June 1, 2018