Introducing Advanced React Component Patterns
Here's a little intro to the course material. I hope you enjoy the course!
The goal of this course is to give you the concepts and ideas you need to make components as simple and flexible as possible so you and your team will have an easier time building an amazing UI.
You will learn several patterns in this course (Comound and HoC components, render props, and the Provider pattern etc.) that are used broadly in the JavaScript (and specifically React) ecosystem. Some patterns are meant to be used in place of others while many compliment when used in tandem with each other.
None of these patterns have caused performance issues of note so give each pattern a try and see how you like it.
Links:
Instructor: [00:00] The goal of this advanced React component patterns course is to give you the concepts and ideas you need to make your React components simpler, more flexible, and more enjoyable to work with.
[00:10] For the whole course, we'll center everything around a simple toggle component, a component that manages the stage of a Boolean. We'll keep it as simple as possible, so you can focus your attention on the incredible patterns that you'll be learning.
[00:21] At the end, though, you'll see that these patterns are flexible and simple enough to encapsulate and distribute the state of your entire application, not just a Boolean. I think that will blow your socks off.
[00:32] We'll go several different patterns, like compound components, higher order components, render props, and the provider pattern, just to name a few. Some of these patterns are different ways of doing the same thing, while other are able to coexist to make a more flexible API.
[00:46] By working with the same basic toggle component, you'll be able to quickly identify the differences and trade-offs of each of these patterns. I've used and shipped each of these patterns in production, and I can tell you that you have some really awesome stuff to look forward to in this course.
[00:59] Before you ask, because this is a really common question, none of these patterns have led to performance problems in any situation I've encountered. As with most everything else in our ever-changing software world, you should most often focus on things that make the code easier to modify and maintain, rather than prematurely optimizing code, or even optimizing without measuring.
[01:20] You might just inadvertently make things slower if you're not careful. Read Ryan's awesome blog post called "React In-line Functions and Performance" if you're curious to know more. I couldn't be more excited about this advanced React component patterns course.
[01:33] I encourage you to take notes and think about the React components you're working on, and see how you could integrate these patterns into those components. I can't wait to hear about the awesome things you build with this knowledge.