I’ve worked on various React projects and codebases in the last couple of years.
From small e-commerce clients to big enterprise clients.
I’ve seen how different codebases become tangled, hard to maintain, and develop.
Or how business requirements change and you must refactor most of the app.
In one of these projects, my team and I decided to take a more strategic approach: split components into Generic and Domain categories.
This helped us create more modular, reusable code while addressing the new business needs and requirements.
What Are Generic Components?
Generic components handle common tasks not tied to specific business or domain requirements.
These components provide a solid foundation and can be reused across all pages, no matter the context.
For example: buttons, text inputs, forms, modals, cards, etc.
What Are Domain Components?
Domain components are built on top of these Generic components.
They address the unique needs of your product and business context.
For example, a <BackButton /> might build on Generic <Button /> to handle navigation in a product-specific way.
Why Splitting Components Into Generic And Domain?
- Reusability: Generic components are easy to reuse in new features or across different projects.
- Maintainability: When business requirements change, you only update the Domain components while the Generic ones stay the same.
- Consistency: By having a set of standard building blocks, you product and business look and feel stays consistent.
- Scalability: Over time, you can evolve the set of Generic components into a separate UI component library.
📋 Recap
- Prefer creating many reusable Generic components that can be further extended and composed into more specific Domain components.
- Splitting components into Generic and Domain categories helps your codebase to be more reusable, maintainable, consistent, and ready to scale.