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

119,067 subscribers

130,061 Aufrufe • vor 2 Jahren •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von George Moller

George Mollervor 2 Jahren

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics just like this one. Check them out ↓

Profilbild von Anthony 🇳🇬🇨🇦

Anthony 🇳🇬🇨🇦vor 2 Jahren

So you want to use a hook just to render a drop down? It was much simpler the way it was before and arguably easier to maintain Using a footer props (as html) is another solution that will eliminate 4 props. I would also pass in the children as props as well

Profilbild von George Moller

George Mollervor 2 Jahren

Let's suppose you want to add a link just to one dropdown item (really common use case), you would have to either pass in a renderItem props to the dropdown or have a check inside the dropdown at the item level like && <a href=""... This is just one use case, usually you would have many of these. That doesn't scale. With this pattern you leave the extension/customization to the consumer (App) instead of bloating the Dropdown component.

Profilbild von Michał Janaszek

Michał Janaszekvor 2 Jahren

When you get the task "use the Dropdown component (no mockups)" in the first implementation everyone knows exactly what the final look should be, in the second version the developer can create a completely different version than the creator of the task imagined.

Profilbild von George Moller

George Mollervor 2 Jahren

If you don't get mockups/requirements, how would you know if you need to render a footer for example. The same can be said about the first implementation, the developer forgets to add a footer prop and the end result is different.

Profilbild von Shripal Soni

Shripal Sonivor 2 Jahren

Nice tip to keep component open to extension, George 👍

Profilbild von George Moller

George Mollervor 2 Jahren

Glad you liked it Shripal did you use/know this pattern in React before? It's quite useful

Profilbild von Atif Riaz

Atif Riazvor 2 Jahren

This is an amazing video.. keep them coming

Profilbild von George Moller

George Mollervor 2 Jahren

Glad you liked it Atif did you know this pattern in React before?

Profilbild von Enrique Moreno

Enrique Morenovor 2 Jahren

Not a bad solution. I like it.

Profilbild von George Moller

George Mollervor 2 Jahren

Glad you liked it Enrique!

Ä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

177,627 Aufrufe • vor 1 Jahr

❌ 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