Using Composition in React to Avoid 'Prop Drilling'

You can compose your React components in different ways to avoid passing props down multiple levels, thereby increasing your component's flexibility PLUS making it more explicit.

[leerob]

For simple examples, I think this works really well. I'd argue for larger examples Context would work better. The solution with composition ends up creating a larger JSX tree at the top level, which again, is fine while it's small. The problem compounds as you continue to get components of components of components.

I think in an ideal world there's a little bit of both. But I agree with what you're saying in theory - you don't need global state to avoid prop drilling.

[GFe]

Great video! Although your keyboard drilled my ears more than props to my component 🤣

[vinodloha]

Thanks for making this so clear, I also always felt children pattern is most powerful feature of React and underrated too.

[uobislrt]

This video makes it just so easy to understand how to use component composition to get around prop drilling (and provide greater component flexibility). And only 15 mins! Thank you so much for putting this together.

[omaraguinaga]

You did great here, when I first read the tweet I was very confused on how to use component composition instead of context and you made it so clear with this. Thank you so much.

[davidrocky]

This is great! My brain was already seeing that that Context seemed too much but I didn't tried composition until now. This surely will help me in killing that poor contexts.
Seeing the comments I think this is the correct resume about using Composition vs Contexts:
-Use Composition to solve simple (or shallow) prop drilling problems or to make components that can be composable and used in different places with some differences in the template.
-Use Context when I really have some deep tree and this context is really need and used by many others components.

[thelostvorg]

so by using composition we explicitly expose the children of a component and pass state directly to the child component that needs it. this was a great video, I learned about composition and useContext hook at the same time . great !

[kentbull]

I really like this. Composition makes a lot more sense when you want to share context across a set of components. Making things explicit increases maintainability and reduces potential bugs when components are reused.

[alexandersen]

Four years later, this saved my day! Thanks.

[AvindraGoolcharan]

10:02 to skip to context and jump right into composition example

[Dizzzy]

Being able to pass state from the App component a few levels down is a great thing.

I feel like this is going to help me fix a few issues with my code.

Thanks for teaching this to us.

[grimmdanny]

This is a good video. My opinion on this is that your example works well because it's extremely basic in UI design (i.e. none). Breaking down components like this into Children is something I've done a lot of, however I stopped doing this (exclusively) because when it came time to make something more complex — *like a real application with a real UI* — composition just wasn't cutting it on its own.

Thanks to Context, I was able to get a lot more done, with a lot less code, and it helps keep my components sane. I've never had an issue with using Context to store large sets of data for the entire app, even in production, which in my case needs to be used in multiple components — with no relation to each other, and also deeply nested. I also never had a rendering issue with Context when applied to all child components under the provider either. I am not worried about the re-renders from the props being passed to all elements, none of it is being written to the DOM unless actual data changes.

Composition became a problem for me when the UI I was developing started getting complex in layout, and I had too much code in the main App.tsx file trying to create this layout. Doing it all by Composition put me in a mindset where I started breaking out ALL small chunks of elements into their own Components and it was becoming a huge mess because I was convinced this was the best way to solve an issue.

I eventually got over it once the product I helped developed removed a lot of Composition and instead replaced a lot of with Context with absolutely zero issues. It's in production, everyone is happy, and the product is profitable (in the >$900k a month). The biggest benefit to this is: Less developer headaches, quicker development because we simply get the data we need, when we need it and where we need it.

While the Composition reduces a lot of prop drilling, you're really just replacing it with a lot of Child nesting. Either way, nesting needs to be managed.

Today I use a mix of both and never had any issues since.

[abubakar.khawaja]

Thanks for showing how to implement Composition. Now would be able to use both according to condition.

[brandonwie]

Thanks Jordan for this video. It really gave me a different view when dealing with props in components.

[htmlfivedev]

Best video on the topic ...just Excellent!!

[slowcoding]

The video helps me understand the difference between the Context and the function composition. Thanks a lot.

[oliversaxon]

This has given me a new perspective - thank you!

[shamlikiruba]

Very clear video about where to use context and where to use composition. Thanks!

[heqcmri]

Very clear and concise! I will have the composition pattern in mind next time! thx for sharing

[sauravkumar]

A very simple example to understand the scenario where we need to use context and component composition.