How To Craft Flexible UIs In React by Using Generic And Domain Components? 💪
That's part of my book "The Conscious React" 📚
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.
Preview of The Conscious React
You’re now reading a free preview of one of the chapters part of “The Conscious React” book.
I wrote this book on React as a comprehensive guide on React Architecture, Design, and Clean Code.
The book consists of six chapters, containing 74+ principles and rules, described in 108 pages, including 80+ code snippets.
📋 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.
That's all for today. I hope this was helpful. ✌️
👋 Let’s connect
You can find me on LinkedIn, Twitter(X), Bluesky, or Threads.
I share daily practical tips to level up your skills and become a better engineer.
Thank you for being a great supporter, reader, and for your help in growing to 20.9K+ subscribers this week 🙏
You can also hit the like ❤️ button at the bottom to help support me or share this with a friend. It helps me a lot! 🙏