Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

_georgemoller's profile picture

George Moller

119,061 subscribers

48,311 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieNachrichten & PolitikBildung
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von George Moller
George Mollervor 1 Jahr

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 ↓

Profilbild von Hunter
Huntervor 1 Jahr

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.

Profilbild von Diego B.
Diego B.vor 1 Jahr

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()

Profilbild von GreLI
GreLIvor 1 Jahr

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.

Profilbild von Fabrizio
Fabriziovor 1 Jahr

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

Profilbild von Owen Melbourne
Owen Melbournevor 1 Jahr

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 😂

Profilbild von Enrique Moreno
Enrique Morenovor 1 Jahr

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

Profilbild von George Moller
George Mollervor 1 Jahr

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

Profilbild von Anthony
Anthonyvor 1 Jahr

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()

Profilbild von Pavel Romanov
Pavel Romanovvor 1 Jahr

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

Profilbild von George Moller
George Mollervor 1 Jahr

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?

Ähnliche Videos

❌ 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 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 2 Jahren

❌ 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 Aufrufe • vor 4 Monaten

❌ 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,608 Aufrufe • vor 2 Jahren

❌ 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,830 Aufrufe • vor 2 Jahren

❌ 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 Aufrufe • vor 2 Jahren

❌ 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 Aufrufe • vor 2 Jahren

❌ 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 Aufrufe • vor 2 Jahren

❌ 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 Aufrufe • vor 2 Jahren

❌ 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 Aufrufe • vor 2 Jahren

❌ 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 Aufrufe • vor 1 Jahr

🚨 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.
0:47

🚨 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 Aufrufe • vor 1 Jahr

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

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

George Moller

77,657 Aufrufe • vor 2 Jahren

❌ 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 Aufrufe • vor 4 Monaten

🎉 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

66,253 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 2 Jahren

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 👉
0:54

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 Aufrufe • vor 3 Jahren

❌ 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 Aufrufe • vor 1 Jahr

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.
8:32

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 Aufrufe • vor 2 Jahren

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓
0:35

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

George Moller

161,321 Aufrufe • vor 4 Monaten