Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

118,935 subscribers

177,627 Aufrufe • vor 1 Jahr •via X (Twitter)

Bildung Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

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

Profilbild von wlepinski

wlepinskivor 1 Jahr

This is a really bad example of composition. You kind of allow the user to make a mistake like adding the icon in between the other components. If you want something similar you have to use renderProps.

Profilbild von George Moller

George Mollervor 1 Jahr

I call that flexibility

Profilbild von tslamoon

tslamoonvor 1 Jahr

Meh. Yes use composition but this example Implementation isn’t that much better. It’s why we don’t have div and div.p and div.h1

Profilbild von React Nuclear

React Nuclearvor 1 Jahr

This allows too much configurability. It’s better to use the interface of the component to guarantee the user won’t abuse how the component works internally. (“children: ReactNode” is basically an any)

Profilbild von Qui soc

Qui socvor 1 Jahr

Bad example of composition tbh

Profilbild von Snehil Kumar

Snehil Kumarvor 1 Jahr

Composition is good for an unopinionated component library where expectation is that devs will add custom styles. But it's a no-go for a product/brand's design system because they have rules set in stone for the sake of consistency Eg: "alert icon will always be on the top-left"

Profilbild von Stephen Rayner

Stephen Raynervor 1 Jahr

Isn’t exporting as sub elements on the parent bad practice? Due to tree shaking limitations?

Profilbild von huda

hudavor 1 Jahr

For me this does not make sense as I would have to change all the Alerts in my codebase if I want to change the Alert itself. If I wrap this in it's own component, I would have to pass all the props to the wrapper component.

Profilbild von Ndeye Fatou Diop 🚢 💻 | DEV | 🇸🇳🇫🇷

Ndeye Fatou Diop 🚢 💻 | DEV | 🇸🇳🇫🇷vor 1 Jahr

Love using this tip especially for the performance benefits

Ähnliche Videos

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

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

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

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

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

❌ 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

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

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

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

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

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

💡React tip: Use a custom hook to handle array states in your components

💡React tip: Use a custom hook to handle array states in your components

George Moller

119,681 Aufrufe • vor 2 Jahren

⚛️ Instead of mixing business logic in React components I like to create small and predictable reducer abstractions with useReducer ↓

⚛️ Instead of mixing business logic in React components I like to create small and predictable reducer abstractions with useReducer ↓

George Moller

24,702 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 ↓

❌ 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

⚛️ One component, many forms: the power of polymorphic React components ↓

⚛️ One component, many forms: the power of polymorphic React components ↓

George Moller

59,703 Aufrufe • vor 1 Jahr

Mafs - "React components for interactive math" Feels like butter interacting with these components. The library is clearly made with ♥️

Mafs - "React components for interactive math" Feels like butter interacting with these components. The library is clearly made with ♥️

Jay Hack

122,213 Aufrufe • vor 3 Jahren

Client/Server composition with server components feels illegal 😅

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

69,150 Aufrufe • vor 2 Jahren

just made a new prototyping tool for react components, live props, on a canvas this was 2hrs from scratch — with new multi-agent ux + to-dos in Cursor, kinda magic!

just made a new prototyping tool for react components, live props, on a canvas this was 2hrs from scratch — with new multi-agent ux + to-dos in Cursor, kinda magic!

Ryo Lu

234,893 Aufrufe • vor 11 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

🎉 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

I updated Build UI's user search to use React Server Components with Next 13's appDir. The code for this was so simple.

I updated Build UI's user search to use React Server Components with Next 13's appDir. The code for this was so simple.

Ryan Toronto

378,375 Aufrufe • vor 3 Jahren