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

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

На главную

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

_georgemoller's profile picture

George Moller

117,809 subscribers

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

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля 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 77+ video tutorials just like this one. Check them out ↓

Фото профиля Hunter
Hunter2 лет назад

While I think this is clean. This pattern has made debugging difficult in my experience with large React apps. With props I can trace them up the tree to find where they're being defined/refined/etc. I can see in the code exactly what's available to a component. With contexts it's not as easy to know what a component has access to, I often end up doing runtime logging to see what's in my context. And it's hard to find where something is being set or added. Again in large apps where naming makes things make grepping an issue tok.

Фото профиля Diego B.
Diego B.2 лет назад

In the same file where you create the context, you should use the useContext and export it, so you can have the consumer in there as well. const { addToast } = useToast()

Фото профиля GreLI
GreLI2 лет назад

As long as you'll do it for forms reacting to every new entered key, the form will be wa-ay too slow. It'll need much effort to memoize everything to prevent sluggishness. Context is good for infrequently changed data.

Фото профиля Fabrizio
Fabrizio2 лет назад

That would cause Header, Main and Footer to re-render every time a toast is added

Фото профиля Owen Melbourne
Owen Melbourne2 лет назад

I like what context allows you to do, but wrapping your app in a thousand of them ends up being so 🤮 you start to look at Redux like a god 😂

Фото профиля Enrique Moreno
Enrique Moreno2 лет назад

Long time no posting. Had a good summer vacation, I guess ;)

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

haha I wish! work has kept me busy Enrique, how are you doing btw?

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

I do this everywhere it fits. It amazes me that people do not use this pattern more. With the above, you can add 1 line of code to get a hook (vs import React.useContext and the ToastContext). Just use a hook. const {addToast} = useToasts()

Фото профиля Pavel Romanov
Pavel Romanov2 лет назад

How often do you use context vs libraries like query and zustand in the real world apps?

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

I try to keep the scope of context narrow, otherwise I try to use useState or useQuery as much as possible, haven't been using an outside library for state management for a while now. How about you?

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

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

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

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

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

❌ 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

215,014 просмотров • 3 лет назад

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

❌ Avoid using objects as dependencies in React.useEffect() ✅ Instead use the primitive keys
0:39

❌ Avoid using objects as dependencies in React.useEffect() ✅ Instead use the primitive keys

George Moller

43,042 просмотров • 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,443 просмотров • 3 лет назад

❌ Avoid listening for ref changes with useEffect() in React. ✅ Instead use a ref callback function.
0:20

❌ Avoid listening for ref changes with useEffect() in React. ✅ Instead use a ref callback function.

George Moller

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

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

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

❌ 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

39,326 просмотров • 3 лет назад

❌ 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 год назад

Saved you some time! Here's how I filled out my 2026 California General Election ballot: Governor: Steve Hilton Lieutenant Governor: Gloria Romero Secretary of State: Don Wagner Controller: Herb Morgan Treasurer: Jennifer Hawks Attorney General: Michael Gates Insurance Commissioner: Ben Allen Superintendent of Public Instruction: Sonja Shaw Prop 1 ❌ Prop 2 ❌ Prop 3 ❌ Prop 4 ❌ Prop 5 ❌ Prop 37 ❌ Prop 38 ✅ Prop 39 ✅ Prop 40 ❌ Prop 41 ✅ Prop 42 ✅ Prop 43 ✅ Prop 44 ❌ Don’t wait for Election Day! Drop off your ballot NOW and spend the next two weeks getting everyone you know to do the same.
3:49

Saved you some time! Here's how I filled out my 2026 California General Election ballot: Governor: Steve Hilton Lieutenant Governor: Gloria Romero Secretary of State: Don Wagner Controller: Herb Morgan Treasurer: Jennifer Hawks Attorney General: Michael Gates Insurance Commissioner: Ben Allen Superintendent of Public Instruction: Sonja Shaw Prop 1 ❌ Prop 2 ❌ Prop 3 ❌ Prop 4 ❌ Prop 5 ❌ Prop 37 ❌ Prop 38 ✅ Prop 39 ✅ Prop 40 ❌ Prop 41 ✅ Prop 42 ✅ Prop 43 ✅ Prop 44 ❌ Don’t wait for Election Day! Drop off your ballot NOW and spend the next two weeks getting everyone you know to do the same.

Steve Hilton

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

🎉 Releasing Framer Motion Theatre, a library for creating animated React components. ⚡️ Use Theatre.js in React with a simple declarative API ⚡️ Animate Framer-motion's motion values using Theatre.js ⚡️ Get WYSIWYG editing for your components with 1 line of code 1/6
0:22

🎉 Releasing Framer Motion Theatre, a library for creating animated React components. ⚡️ Use Theatre.js in React with a simple declarative API ⚡️ Animate Framer-motion's motion values using Theatre.js ⚡️ Get WYSIWYG editing for your components with 1 line of code 1/6

Andrew Prifer (is hiring)

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

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