Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

_georgemoller's profile picture

George Moller

118,961 subscribers

256,599 görüntüleme • 2 yıl önce •via X (Twitter)

Sağlık & İyilikEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

George Moller profil fotoğrafı
George Moller2 yıl önce

Gain a competitive edge by writing code that's not just functional, but also clean and performant ↓

George Moller profil fotoğrafı
George Moller2 yıl önce

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics and 50+ video animations just like this one. Check them out ↓

GiFTED! profil fotoğrafı
GiFTED!2 yıl önce

You’re basically doing the same thing, only cleaner 🙂

Pavel Romanov profil fotoğrafı
Pavel Romanov2 yıl önce

What about typescript support for those props?

Matt profil fotoğrafı
Matt2 yıl önce

If someone presented this during an interview. I would hire them.

George Moller profil fotoğrafı
George Moller2 yıl önce

🤣

Brandon Austin profil fotoğrafı
Brandon Austin2 yıl önce

Looks pretty. In instances where I’m in provider wrapping hell, which is often, I find that the order of Providers is incredibly important. Not sure I’d be able to adopt

Alex Sherman profil fotoğrafı
Alex Sherman2 yıl önce

this is fkn wild 👏

Roiko profil fotoğrafı
Roiko2 yıl önce

Why is "provider hell" bad though? Pretty easy to follow the hierarchy, no?

George Moller profil fotoğrafı
George Moller2 yıl önce

I agree with you, the “avoid” part is an exaggeration 🤣. There is nothing wrong with having multiple providers at the root. You hardly ever revisit the root so it should be fine!

Benzer Videolar

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.
0:21

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

George Moller

120,828 görüntüleme • 2 yıl önce

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API
1:02

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

George Moller

48,311 görüntüleme • 1 yıl önce

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.
0:46

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

177,627 görüntüleme • 1 yıl önce

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.
1:00

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

130,061 görüntüleme • 2 yıl önce

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition
0:31

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

George Moller

50,727 görüntüleme • 4 ay önce

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.
0:51

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.

George Moller

214,951 görüntüleme • 2 yıl önce

❌ Avoid using useState for more complex state management ✅ Instead use useReducer ↓
0:32

❌ Avoid using useState for more complex state management ✅ Instead use useReducer ↓

George Moller

124,069 görüntüleme • 2 yıl önce

❌ Avoid difficult-to-read conditionals in React. ✅ Instead you can use ts-pattern to express complex conditions in a single, compact expression.
0:21

❌ Avoid difficult-to-read conditionals in React. ✅ Instead you can use ts-pattern to express complex conditions in a single, compact expression.

George Moller

185,781 görüntüleme • 2 yıl önce

❌ Avoid increasing time complexity by having non-normalized state variables in React . ✅ Instead normalize the structure of the state variables to reduce time complexity.
0:20

❌ Avoid increasing time complexity by having non-normalized state variables in React . ✅ Instead normalize the structure of the state variables to reduce time complexity.

George Moller

177,601 görüntüleme • 2 yıl önce

❌ Don't disable ESLint warnings in useEffect ✅ Instead use useEffectEvent from React 19.2
0:27

❌ Don't disable ESLint warnings in useEffect ✅ Instead use useEffectEvent from React 19.2

George Moller

57,237 görüntüleme • 4 ay önce

❌ Avoid deriving state in useEffect in React, this can create multiple unnecessary render phases. ✅ Instead derive the state directly in the event handler, this way you'll have one single render phase. ↓
0:29

❌ Avoid deriving state in useEffect in React, this can create multiple unnecessary render phases. ✅ Instead derive the state directly in the event handler, this way you'll have one single render phase. ↓

George Moller

33,474 görüntüleme • 1 yıl önce

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.
0:34

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.

George Moller

137,429 görüntüleme • 2 yıl önce

❌ Avoid multiple state variables to track status. ✅ Instead use enums.
0:22

❌ Avoid multiple state variables to track status. ✅ Instead use enums.

George Moller

152,253 görüntüleme • 1 yıl önce

❌ Avoid deeply nested validations that are hard to read. ✅ Instead use invariants.
1:03

❌ Avoid deeply nested validations that are hard to read. ✅ Instead use invariants.

George Moller

206,841 görüntüleme • 1 yıl önce

❌ You 𝗺𝗶𝗴𝗵𝘁 not need a react form library ✅ Instead you can use the FormData API's
1:03

❌ You 𝗺𝗶𝗴𝗵𝘁 not need a react form library ✅ Instead you can use the FormData API's

George Moller

81,577 görüntüleme • 2 yıl önce

❌ Conditional rendering loses form state in React. ✅ React 19's Activity API preserves it. e.g. Switch between steps → your data stays. Effects cleanup automatically → no wasted resources.
0:22

❌ Conditional rendering loses form state in React. ✅ React 19's Activity API preserves it. e.g. Switch between steps → your data stays. Effects cleanup automatically → no wasted resources.

George Moller

74,003 görüntüleme • 5 ay önce

Dear Muslims, avoid using these words in your homes...
1:28

Dear Muslims, avoid using these words in your homes...

Idris

19,914 görüntüleme • 1 yıl önce

5 Cursor beginner mistakes to avoid: 1. Using AI pane instead of Composer 2. Not saving your project enough 3. Not including all files as context (and using mention) 4. Doing too many changes at once 5. Using Cursor for UI, instead of v0 Video to walk you through it ⬇️
11:33

5 Cursor beginner mistakes to avoid: 1. Using AI pane instead of Composer 2. Not saving your project enough 3. Not including all files as context (and using mention) 4. Doing too many changes at once 5. Using Cursor for UI, instead of v0 Video to walk you through it ⬇️

Moritz Kremb

206,374 görüntüleme • 1 yıl önce

All natural gardening tip to unalive weeds! 😉 Avoid using toxic chemicals in and around your home by making the switch.
0:35

All natural gardening tip to unalive weeds! 😉 Avoid using toxic chemicals in and around your home by making the switch.

Shawnee Gregorio

62,590 görüntüleme • 1 ay önce

What a day at the Rivals Combine in Nashville. Completely sold out, verified combine times and data for all athletes in attendance 🔥 Rivals High School ✅ 1,700+ athletes ✅ 41 states represented Largest event we’ve ever run. Earn your stars 💯
0:31

What a day at the Rivals Combine in Nashville. Completely sold out, verified combine times and data for all athletes in attendance 🔥 Rivals High School ✅ 1,700+ athletes ✅ 41 states represented Largest event we’ve ever run. Earn your stars 💯

Billy Tucker

18,908 görüntüleme • 1 ay önce