Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

🚨 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

119,093 subscribers

21,380 views • 1 year ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

5 Comments

George Moller1 year ago

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 ↓

glueckkanja4 years ago

Are you searching for a simple way to deploy device certificates with #Intune? Check out SCEPman at

Ayuka1 year ago

ребята не слушайте его 🙏🙏🙏

🦜1 year ago

Provider value={{}} recreated Object on each state changes and rerenders all components down the tree which not consume context

Stefan ⚛︎ 🎆1 year ago

COMPOUND 👏 COMPONENTS 👏 RULE 👏

Related Videos

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

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

George Moller

301,101 views • 2 years ago

❌ 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 views • 1 year ago

❌ 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 views • 2 years ago

❌ 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 views • 4 months ago

❌ 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 views • 2 years ago

❌ 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 views • 2 years ago

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

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

George Moller

48,323 views • 1 year ago

The Virginia Supreme Court has ruled that the Democratic effort to redraw the state’s congressional map into a 10–1 configuration is null and void.

The Virginia Supreme Court has ruled that the Democratic effort to redraw the state’s congressional map into a 10–1 configuration is null and void.

Breaking911

37,119 views • 1 month ago

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

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

George Moller

152,349 views • 1 year ago

Radon IDE 1.0 is live! 🎉 Turn VSCode and Cursor into a fully-fledged IDE for React Native and Expo: ✅ Build & run RN and Expo apps in integrated panel w/o extra configuration ✅ Jump to code from inspector, view hierarchy or log console ✅ Use debugger effortlessly in your code

Radon IDE 1.0 is live! 🎉 Turn VSCode and Cursor into a fully-fledged IDE for React Native and Expo: ✅ Build & run RN and Expo apps in integrated panel w/o extra configuration ✅ Jump to code from inspector, view hierarchy or log console ✅ Use debugger effortlessly in your code

Software Mansion

41,263 views • 1 year ago

"How to share state between React client components with a parent server component?" 👇

"How to share state between React client components with a parent server component?" 👇

Alex Sidorenko

50,550 views • 1 year ago

It’s here. Beautifully designed components built with Radix UI and Tailwind CSS. A collection of accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready.

It’s here. Beautifully designed components built with Radix UI and Tailwind CSS. A collection of accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready.

shadcn

666,954 views • 3 years ago

Calendar built from scratch ↓ → Next.js hosted on Vercel → Tailwind CSS for styling → shadcn for beautiful and accessible components → nuqs for URL-based state management

Calendar built from scratch ↓ → Next.js hosted on Vercel → Tailwind CSS for styling → shadcn for beautiful and accessible components → nuqs for URL-based state management

João Melo

16,531 views • 1 year ago

The Svelte 5 guide has everything from reactivity and how it works, when to use and avoid effects, events, bindings, components and composition, transitions and animations to using third party libraries and making external systems reactive. 🔥

The Svelte 5 guide has everything from reactivity and how it works, when to use and avoid effects, events, bindings, components and composition, transitions and animations to using third party libraries and making external systems reactive. 🔥

matia 🇭🇷

10,805 views • 10 months ago

Three Framer components using its Data() API. They’re self contained code components sharing a single state to sync SoundCloud playback, live ticker data, and a fully interactive record player. Sound on 🔊 The video shows various states from staggered first time track use (compensated for arm position), play and pause in one component and affecting another one, arm drag to scrub a track on the vinyl, and a ticker that takes data depending on states.

Three Framer components using its Data() API. They’re self contained code components sharing a single state to sync SoundCloud playback, live ticker data, and a fully interactive record player. Sound on 🔊 The video shows various states from staggered first time track use (compensated for arm position), play and pause in one component and affecting another one, arm drag to scrub a track on the vinyl, and a ticker that takes data depending on states.

Lee Black

15,998 views • 5 months ago

People of Namibia 🇳🇦 This is to INFORM you that the Minister of Industry and Deputy Prime Minister will meet with the Board and Management of NIDA to DISCUSS and AVOID state Assets being Privatised and Auctioned to Foreigners.

People of Namibia 🇳🇦 This is to INFORM you that the Minister of Industry and Deputy Prime Minister will meet with the Board and Management of NIDA to DISCUSS and AVOID state Assets being Privatised and Auctioned to Foreigners.

Prof. Job Shipululo AMUPANDA

11,730 views • 11 months ago

❌ 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 views • 2 years ago

🎓 Stateful Components tutorial A new way to reuse components in Rive without wiring up a separate view model instance for each one. Override properties directly in the inspector for faster iteration. Significantly reduces complexity and enables quick design iteration.

🎓 Stateful Components tutorial A new way to reuse components in Rive without wiring up a separate view model instance for each one. Override properties directly in the inspector for faster iteration. Significantly reduces complexity and enables quick design iteration.

Rive

18,233 views • 27 days ago

While hot fire tests may be the crowd pleasers, our team at Test Stand 3 works diligently to test and qualify the internal components of our rockets and spacecraft. This crew tests valves, composite pressure tanks, and other components daily to ensure everything flows smoothly.

While hot fire tests may be the crowd pleasers, our team at Test Stand 3 works diligently to test and qualify the internal components of our rockets and spacecraft. This crew tests valves, composite pressure tanks, and other components daily to ensure everything flows smoothly.

Firefly Aerospace

38,290 views • 9 months ago

You can now create component property groups — which means you can more easily reuse components throughout your site 🖥️ Easier-to-use components, more design consistency, stunning sites.

You can now create component property groups — which means you can more easily reuse components throughout your site 🖥️ Easier-to-use components, more design consistency, stunning sites.

Webflow

20,742 views • 2 years ago