Загрузка видео...

Не удалось загрузить видео

На главную

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

_georgemoller's profile picture

George Moller

118,888 subscribers

120,830 просмотров • 2 лет назад •via X (Twitter)

ОбразованиеНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля George Moller
George Moller2 лет назад

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

Фото профиля Stephen Burke
Stephen Burke2 лет назад

This seems like a useless abstraction. You typically never need to touch that nest so adding all of that extra code to achieve the same result seems pointless. What am I missing?

Фото профиля Sarju
Sarju2 лет назад

By doing this you are increasing lines of code, complexity and bug surface area and reducing readability and plus if you are using typescript, there will be lots of extra things to handle compare to original one.

Фото профиля Farley
Farley2 лет назад

What are you closing exactly?

Фото профиля Paulo Barros
Paulo Barros2 лет назад

@fernandozabin @feokuma @AmorimRob

Фото профиля Chung Wei
Chung Wei2 лет назад

This makes your code even harder to read and maintain, not to mention an unnecessary loop. Just move all providers into a separate component and call it a day.

Фото профиля احمد الشبيب
احمد الشبيب2 лет назад

Love your tips George, but this one is not for me. Regardless of the unreadable code I had to create for our lord Typescript, but the App initial start seems to have an odd behavior now? It looks like its re-loading multiple times before it actually settles. Before and After 👇

Фото профиля Anthony Laflamme
Anthony Laflamme2 лет назад

Clever

Фото профиля allen.xyz
allen.xyz2 лет назад

Does this require order to be maintained in the array?

Фото профиля MMILife
MMILife2 лет назад

What's the pros and cons aside from readability?

Похожие видео

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

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

George Moller

256,611 просмотров • 2 лет назад

❌ 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,323 просмотров • 1 год назад

❌ 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 просмотров • 1 год назад

❌ 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 просмотров • 2 лет назад

❌ 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

51,206 просмотров • 4 месяцев назад

❌ 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 просмотров • 2 лет назад

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.
0:40

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.

George Moller

301,101 просмотров • 2 лет назад

❌ 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 просмотров • 2 лет назад

❌ 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 просмотров • 2 лет назад

❌ 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,402 просмотров • 5 месяцев назад

❌ 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 просмотров • 1 год назад

❌ 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 просмотров • 2 лет назад

❌ 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,349 просмотров • 1 год назад

❌ 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 просмотров • 1 год назад

❌ 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 просмотров • 2 лет назад

❌ 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 просмотров • 5 месяцев назад

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

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

Idris

19,914 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 2 месяцев назад

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,946 просмотров • 1 месяц назад