How do you decide what to make a reusable component?
When the same UI pattern appears in multiple places, I extract a reusable component configured by props. I extract after seeing real repetition, not preemptively, to avoid premature abstraction whose cost outweighs the benefit.
Explore This Question
Search for additional explanations using these tools:
More FAQs in React UI Setup and Component Design Interview Questions
By hierarchy: pages at the top, feature components in the middle, reusable primitives at the bottom. Grouped by feature, with one-way data flow and state at the right level. This keeps the app maintainable as it grows.
A Layout component with the persistent UI and an Outlet, nested routes for pages as children, responsive behavior planned early, and a simple shell initially. Auth checks often live in the layout to centralize them.
By grouping files by feature, keeping components focused, extracting reusable primitives, using clear naming, and refactoring when repetition appears. Avoid over-engineering and over-abstracting, which make the code harder to change.
Still have questions?
Browse all our FAQs or reach out to our support team