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

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 ↓

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

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.

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.

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.

Nice tip to keep component open to extension, George 👍

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

This is an amazing video.. keep them coming

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

Not a bad solution. I like it.

Glad you liked it Enrique!