Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

_georgemoller's profile picture

George Moller

119,067 subscribers

130,061 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

George Moller profil fotoğrafı
George Moller2 yıl önce

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 ↓

Anthony 🇳🇬🇨🇦 profil fotoğrafı
Anthony 🇳🇬🇨🇦2 yıl önce

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

George Moller profil fotoğrafı
George Moller2 yıl önce

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.

Michał Janaszek profil fotoğrafı
Michał Janaszek2 yıl önce

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.

George Moller profil fotoğrafı
George Moller2 yıl önce

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.

Shripal Soni profil fotoğrafı
Shripal Soni2 yıl önce

Nice tip to keep component open to extension, George 👍

George Moller profil fotoğrafı
George Moller2 yıl önce

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

Atif Riaz profil fotoğrafı
Atif Riaz2 yıl önce

This is an amazing video.. keep them coming

George Moller profil fotoğrafı
George Moller2 yıl önce

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

Enrique Moreno profil fotoğrafı
Enrique Moreno2 yıl önce

Not a bad solution. I like it.

George Moller profil fotoğrafı
George Moller2 yıl önce

Glad you liked it Enrique!

Benzer Videolar

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

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

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

George Moller

48,311 görüntüleme • 1 yıl önce

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

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

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

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

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

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

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

George Moller

119,681 görüntüleme • 2 yıl önce

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

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

George Moller

24,702 görüntüleme • 2 yıl önce

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

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

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

George Moller

59,703 görüntüleme • 1 yıl önce

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

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

Jay Hack

122,213 görüntüleme • 3 yıl önce

Client/Server composition with server components feels illegal 😅
1:01

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

69,150 görüntüleme • 2 yıl önce

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!
0:22

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

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

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