Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

George Moller

119,061 subscribers

48,311 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji Haberler & Politika Eğitim

Anya Rossi• Live Now

Private livecam show

11 Yorum

George Moller profil fotoğrafı

George Moller1 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 77+ video tutorials just like this one. Check them out ↓

Hunter profil fotoğrafı

Hunter1 yıl önce

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. profil fotoğrafı

Diego B.1 yıl önce

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 profil fotoğrafı

GreLI1 yıl önce

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 profil fotoğrafı

Fabrizio1 yıl önce

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

Owen Melbourne profil fotoğrafı

Owen Melbourne1 yıl önce

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 profil fotoğrafı

Enrique Moreno1 yıl önce

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

George Moller profil fotoğrafı

George Moller1 yıl önce

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

Anthony profil fotoğrafı

Anthony1 yıl önce

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 profil fotoğrafı

Pavel Romanov1 yıl önce

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

George Moller profil fotoğrafı

George Moller1 yıl önce

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?

Benzer Videolar

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

❌ 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

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

George Moller

51,206 görüntüleme • 4 ay önce

❌ 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,608 görüntüleme • 2 yıl önce

❌ 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 görüntüleme • 2 yıl önce

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

❌ 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

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

❌ 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

❌ 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 görüntüleme • 2 yıl ö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. ↓

❌ 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

🚨 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 görüntüleme • 1 yıl önce

⚛️ 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 görüntüleme • 2 yıl önce

❌ 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 görüntüleme • 4 ay önce

🎉 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 görüntüleme • 1 yıl önce

❌ 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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 3 yıl önce

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

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

George Moller

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

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 görüntüleme • 1 yıl önce