Introducing Advanced React Component Patterns

Kent C. Dodds
InstructorKent C. Dodds
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

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.

Danut Codrescu
Danut Codrescu
~ 6 years ago

This is the best course on advanced concepts in React by far. I really had aha moments almost every single video (I have used React intensively for the past year and I was a big fan of HOC, until I have seen these awesome render props techniques). Great job! Excellent stuff!

Kent C. Dodds
Kent C. Doddsinstructor
~ 6 years ago

Thanks so much Danut!

issac lau
issac lau
~ 6 years ago

Great job! Thanks so much Kent!

Peramanathan Sathyamoorthy
Peramanathan Sathyamoorthy
~ 6 years ago

Excellent course!

peter
peter
~ 6 years ago

this says there is 37 videos, but i only see 19-- is that a bug?

Markdown supported.
Become a member to join the discussionEnroll Today