Component composition is undoubtedly where React shines. Being able to freely compose larger views from smaller, flexible building blocks is great. But you have to be careful because it’s easy to get it wrong (or at least suboptimal). By Tomasz Gil.
Containment is a concept where components don’t know their children ahead of time. They are simply containers for other elements. This is especially common for components like Sidebar or Dialog that represent generic “boxes”.
The article then dives into example component code and explains:
- Blurred responsibility
- Longer path to understanding the code
- Poor performance
- Hard to extend and reuse
- What’s containment in React
Simply by moving the component up we solved all problems we’ve identified - made the code easier to reason about, more flexible, and performant. Composition is a really powerful mechanism, but you have to be cautious to do it right. Good read!
[Read More]