React se basa en la idea de componentes modulares. Es esencial mantener estos componentes tan pequeños y enfocados como sea posible. Un componente debe hacer una cosa y hacerla bien. Si encuentras que un componente está creciendo demasiado, probablemente sea el momento de dividirlo en subcomponentes más pequeños.
La descomposición de props hace que tu código sea más limpio y fácil de leer. En lugar de usar props.valor, puedes descomponer tus props directamente en la firma de tu función:
function UserProfile({ name, email }) {
return (
<div>
<p>Name: {name}</p>
<p>Email: {email}</p>
</div>
);
}
Para proyectos más grandes, es una buena práctica utilizar PropTypes o TypeScript para proporcionar tipos a tus props. Esto ayuda a prevenir errores al asegurar que los componentes reciban datos del tipo correcto.
import PropTypes from 'prop-types';
function UserProfile({ name, email }) {
// Component implementation
}
UserProfile.propTypes = {
name: PropTypes.string.isRequired,
email: PropTypes.string.isRequired,
};
type UserProps = {
name: string;
email: string;
};
const UserProfile: React.FC<UserProps> = ({ name, email }) => {
// Component implementation
};
Utiliza Hooks de React para manejar estado y efectos secundarios de una manera más ordenada y funcional. Asegúrate de seguir las reglas de los Hooks (como no usar Hooks dentro de bucles o condicionales) y utiliza Hooks personalizados para extraer lógica reutilizable.
No todos los datos necesitan ser estado. Usa el estado de manera parsimoniosa. Pregúntate si realmente necesitas que algo sea parte del estado del componente. A menudo, puedes calcular valores derivados directamente en el renderizado basándote en props o en otros estados.
Mantén tus funciones puras siempre que sea posible; esto significa que la salida de la función solo debería depender de sus entradas y no modificar ningún estado externo. useEffect es un lugar designado para efectos secundarios como llamadas a APIs, suscripciones, o manipulaciones directas del DOM.
Render props y Higher Order Components (HOCs) son patrones poderosos, pero su uso excesivo puede hacer que el árbol de componentes sea difícil de seguir y aumentar la complejidad. En muchos casos, los Hooks ofrecen una solución más limpia y sencilla.
Evita las renderizaciones innecesarias utilizando React.memo, useMemo, o useCallback cuando sea apropiado. Asegúrate de que las dependencias en los Hooks sean correctas para evitar comportamientos inesperados o renderizaciones excesivas.
Comenta tu código cuando sea necesario. Esto incluye comentarios sobre por qué se está haciendo algo de cierta manera, especialmente si el código no es obvio. Documenta los componentes, especialmente las librerías compartidas y los componentes de UI comunes.
