正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

George Moller

119,061 subscribers

48,311 次观看 • 1 年前 •via X (Twitter)

科学技术新闻政治教育

Anya Rossi• Live Now

Private livecam show

11 条评论

George Moller 的头像

George Moller1 年前

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 的头像

Hunter1 年前

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.1 年前

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 的头像

GreLI1 年前

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 的头像

Fabrizio1 年前

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

Owen Melbourne 的头像

Owen Melbourne1 年前

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 Moreno1 年前

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

George Moller 的头像

George Moller1 年前

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

Anthony 的头像

Anthony1 年前

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 Romanov1 年前

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

George Moller 的头像

George Moller1 年前

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.

❌ 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.

❌ 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

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

George Moller

51,206 次观看 • 4 个月前

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

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

George Moller

256,611 次观看 • 2 年前

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

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

George Moller

120,830 次观看 • 2 年前

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

❌ 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 in React. ✅ Instead you can use ts-pattern to express complex conditions in a single, compact expression.

❌ 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 次观看 • 2 年前

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

❌ 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 increasing time complexity by having non-normalized state variables in React . ✅ Instead normalize the structure of the state variables to reduce time complexity.

❌ 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 年前

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

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

George Moller

124,069 次观看 • 2 年前

❌ 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. ↓

❌ 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 年前

🚨 Avoid monolithic components that combine rendering, state management, and configuration (e.g., IDs, refs) into one unit, is harder to maintain, test, and reuse. ✅ Instead split functionality into composable components and use context to share configuration and state.

🚨 Avoid monolithic components that combine rendering, state management, and configuration (e.g., IDs, refs) into one unit, is harder to maintain, test, and reuse. ✅ Instead split functionality into composable components and use context to share configuration and state.

George Moller

21,380 次观看 • 1 年前

⚛️ React + Typescript tip: Creating dynamic prop types for components with Discriminated Unions ↓

⚛️ React + Typescript tip: Creating dynamic prop types for components with Discriminated Unions ↓

George Moller

77,657 次观看 • 2 年前

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

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

George Moller

57,402 次观看 • 4 个月前

🎉 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

🎉 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

66,253 次观看 • 1 年前

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

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

George Moller

81,577 次观看 • 2 年前

A prototype from a BloomTech AI student: This multi-agentic system writes React components in their entirety (within the context of the company code base.) Generates fully-formed React/JavaScript + CSS + unit tests + Documentation, completely automatically.

A prototype from a BloomTech AI student: This multi-agentic system writes React components in their entirety (within the context of the company code base.) Generates fully-formed React/JavaScript + CSS + unit tests + Documentation, completely automatically.

Austen Allred

36,182 次观看 • 2 年前

Our discussion with Tom Occhino is now live! We discuss: ✅How React changed the web ✅React Server Components ✅Performance optimizations ✅React Native ✅When NOT to use React And much more! Preview below, see the full talk here 👉

Our discussion with Tom Occhino is now live! We discuss: ✅How React changed the web ✅React Server Components ✅Performance optimizations ✅React Native ✅When NOT to use React And much more! Preview below, see the full talk here 👉

Real World React

32,739 次观看 • 3 年前

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

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

George Moller

152,349 次观看 • 1 年前

Each euthanasia provider is meant to follow the criminal law. But in Ontario, the Chief Coroner found instead in 2018 "a pattern of non-compliance, a pattern of not following legislation, a pattern of not following regulation." New docs reveal the problem has gotten worse. A🧵

Each euthanasia provider is meant to follow the criminal law. But in Ontario, the Chief Coroner found instead in 2018 "a pattern of non-compliance, a pattern of not following legislation, a pattern of not following regulation." New docs reveal the problem has gotten worse. A🧵

Alexander Raikin

39,646 次观看 • 1 年前