Al terminar esta nota
- Preferir composición
- Entender el rol histórico de HOC
- Organizar por dominio y escala
Composición antes que configuración
Los children y componentes pequeños hacen visible la estructura. Una prop con veinte variantes suele esconder demasiadas responsabilidades.
tsx
<Card>
<Card.Header title="Proyecto" />
<Card.Body>{summary}</Card.Body>
<Card.Actions><OpenButton /></Card.Actions>
</Card>HOC: transformar componentes
Un Higher-Order Component recibe un componente y devuelve otro. Sigue apareciendo en librerías y código legado; hooks y composición suelen expresar mejor los casos nuevos.
tsx
function withGuard(Component) {
return function Guarded(props) {
const user = useUser();
if (!user) return <Login />;
return <Component {...props} />;
};
}Carpetas que cuentan el producto
Agrupá por dominio cuando las features crecen. Dejá UI verdaderamente compartida fuera. Atomic Design sirve como vocabulario visual, no como obligación para toda la lógica.
text
features/
checkout/
components/
hooks/
checkout.api.ts
shared/
ui/
pages/Árbol de componentes● interactivo
PAGEFEATURECOMPONENTUI
Refactor con intención
Tomá un componente con fetch, formulario y modal. Separá solamente los límites que cambian por razones distintas.
Mostrar una pista
Datos, interacción y presentación son buenos candidatos; no extraigas wrappers vacíos.