Advanced React Component Patterns βš›οΈ

Posted by Ω…Ψ­Ω…Ψ― Ψ§Ω„ΨΉΨ±Ψ¨Ω‰

TL;DR

My highly popular course has been updated (completely re-recorded) and you can
find it here:

πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡

kcd.im/advanced-react

πŸ‘†πŸ‘†πŸ‘†πŸ‘†πŸ‘†πŸ‘†πŸ‘†πŸ‘†πŸ‘†

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:

Make Compound React Components Flexible

I also have a few extra lessons to show you how you can validate that your
Context Consumers are used properly:

Validate Compound Component Context Consumers

And here’s another that shows you how to properly use the Context Provider to
avoid unnecessary re-renders of your consumers:

Prevent Unnecessary Rerenders of Compound Components using React Context

Render Props

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:

Use Render Props with React

We also still have the
prop collections
and
prop getters
patterns because those are still very awesome.

State Reducers

We have a few lessons that feature a completely new pattern that wasn’t in the
original course that I implemented a while ago in
downshift called
the state reducer pattern:

Implement Component State Reducers

Improve the usability of Component State Reducers with state change types

Control 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:

Make Controlled React Components with Control Props

Support Control Props for all state

Support a state change handler for all control props

Improve the usability of Control Props with state change types

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.

Implement the Provider Pattern with React Context

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.

Implement 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!

πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡

kcd.im/advanced-react

πŸ‘†πŸ‘†πŸ‘†πŸ‘†πŸ‘†πŸ‘†πŸ‘†πŸ‘†πŸ‘†

Please share this blog post and the course link with your friends!


Kent C. Dodds 🌌 avatar

Kent C. Dodds 🌌
@kentcdodds

I just published β€œπŸ’― UPDATED: Advanced React Component Patterns βš›οΈβ€


Referenced media

410 Deleted by author β€” Medium

null

medium.com

1:43 PM (UTC) Β· June 1st, 2018
5
57
273




Source link

Tags:
Ω…Ψ­Ω…Ψ― Ψ§Ω„ΨΉΨ±Ψ¨Ω‰
View More Posts
Ω…Ψ―ΩˆΩ†Ψ© ΨͺΩ‚Ω†ΩŠΨ© ΨͺΨ±ΩƒΨ² ΨΉΩ„Ω‰ Ω†Ψ΅Ψ§Ψ¦Ψ­ Ψ§Ω„ΨͺΨ―ΩˆΩŠΩ† ، وΨͺΨ­Ψ³ΩŠΩ† Ω…Ψ­Ψ±ΩƒΨ§Ψͺ Ψ§Ω„Ψ¨Ψ­Ψ« ، ΩˆΩˆΨ³Ψ§Ψ¦Ω„ Ψ§Ω„ΨͺΩˆΨ§Ψ΅Ω„ Ψ§Ω„Ψ§Ψ¬ΨͺΩ…Ψ§ΨΉΩŠ ، وأدواΨͺ Ψ§Ω„Ω‡Ψ§Ψͺف Ψ§Ω„Ω…Ψ­Ω…ΩˆΩ„ ، ΩˆΩ†Ψ΅Ψ§Ψ¦Ψ­ Ψ§Ω„ΩƒΩ…Ψ¨ΩŠΩˆΨͺΨ± ، ΩˆΨ£Ψ―Ω„Ψ© Ψ₯رشادية ΩˆΩ†Ψ΅Ψ§Ψ¦Ψ­ ΨΉΨ§Ω…Ψ© ΩˆΩ†Ψ΅Ψ§Ψ¦Ψ­