After reading this
- Prefer composition
- Understand the historical role of HOCs
- Organize by domain and scale
Composition before configuration
Children and small components keep structure visible. A prop with twenty variants usually hides too many responsibilities.
tsx
<Card>
<Card.Header title="Project" />
<Card.Body>{summary}</Card.Body>
<Card.Actions><OpenButton /></Card.Actions>
</Card>HOC: transform components
A Higher-Order Component receives a component and returns another. It remains in libraries and legacy code; hooks and composition usually express new cases better.
tsx
function withGuard(Component) {
return function Guarded(props) {
const user = useUser();
if (!user) return <Login />;
return <Component {...props} />;
};
}Folders that describe the product
Group by domain as features grow. Keep truly shared UI outside. Atomic Design is a visual vocabulary, not a mandate for all logic.
text
features/
checkout/
components/
hooks/
checkout.api.ts
shared/
ui/
pages/Component tree● interactive
PAGEFEATURECOMPONENTUI
Refactor with intent
Take a component with fetching, a form, and a modal. Separate only boundaries that change for different reasons.
Show a hint
Data, interaction, and presentation are candidates; do not extract empty wrappers.