Guía de Buenas Prácticas de React
Aplica las buenas prácticas de programación bajo los estándares de JavaScript, TypeScript, React y herramientas, que optimicen tu código.
Usar herramientas o bibliotecas para detectar y prevenir errores durante el desarrollo
Utiliza herramientas como ESLint para identificar, anticipar y resolver posibles errores y Prettier para mantener tu código indentado, limpio y legible.
Configuración Básica de ESLint
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:@typescript-eslint/recommended"
],
"plugins": ["react", "react-hooks", "@typescript-eslint"],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/jsx-key": "error",
"no-mixed-operators": "warn"
}
}Advertisement
Evitar el uso de hooks dentro de condicionales
Sigue la regla básica de los hooks en React: nunca uses un hook dentro de una condición.
❌ Mala práctica
function MyComponent({ condition }) {
if (condition) {
// ❌ Error: Hook dentro de condicional
const memoizedValue = useMemo(() => {
return expensiveCalculation();
}, []);
}
return <div>Content</div>;
}Regla violada: react-hooks/rules-of-hooks
✅ Buena práctica
function MyComponent({ condition }) {
// ✅ Hook siempre se ejecuta
const memoizedValue = useMemo(() => {
if (!condition) return null;
return expensiveCalculation();
}, [condition]);
return <div>Content</div>;
}Mejorar la legibilidad de expresiones lógicas y aritméticas
Utiliza operadores de agrupamiento para que las expresiones sean más legibles.
❌ Mala práctica
// ❌ Difícil de leer
const result = a && b || c && d;
const calculation = a + b * c - d / e;Regla violada: no-mixed-operators
✅ Buena práctica
// ✅ Más legible con paréntesis
const result = (a && b) || (c && d);
const calculation = a + (b * c) - (d / e);Advertisement
Manejo adecuado del array de dependencias en hooks
El array de dependencias en hooks como useCallback, useMemo y useEffect debe contener solo valores mutables para evitar re-renderizaciones innecesarias.
❌ Mala práctica
const DATA_QUERY_KEY_LIST = ['users', 'posts']; // Constante fuera del componente
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
// ❌ DATA_QUERY_KEY_LIST es una constante que no cambia
fetchData(DATA_QUERY_KEY_LIST);
}, [data, DATA_QUERY_KEY_LIST]); // ⚠️ Dependencia innecesaria
return <div>{/* ... */}</div>;
}Regla violada: react-hooks/exhaustive-deps
✅ Buena práctica
function MyComponent() {
const [data, setData] = useState([]);
// ✅ Constante dentro del componente o usando useMemo
const DATA_QUERY_KEY_LIST = useMemo(() => ['users', 'posts'], []);
useEffect(() => {
fetchData(DATA_QUERY_KEY_LIST);
}, [DATA_QUERY_KEY_LIST]);
return <div>{/* ... */}</div>;
}Separar código arbitrario del componente
Usa funciones utilitarias o helper functions fuera del cuerpo del componente para mantenerlo limpio y enfocado.
❌ Mala práctica
function UserProfile({ user }) {
// ❌ Lógica compleja dentro del componente
const formatUserData = () => {
return {
fullName: `${user.firstName} ${user.lastName}`,
age: new Date().getFullYear() - user.birthYear,
isAdult: new Date().getFullYear() - user.birthYear >= 18
};
};
const formattedUser = formatUserData();
return <div>{formattedUser.fullName}</div>;
}✅ Buena práctica
// ✅ Helper function fuera del componente
function formatUserData(user) {
const currentYear = new Date().getFullYear();
const age = currentYear - user.birthYear;
return {
fullName: `${user.firstName} ${user.lastName}`,
age,
isAdult: age >= 18
};
}
function UserProfile({ user }) {
const formattedUser = formatUserData(user);
return <div>{formattedUser.fullName}</div>;
}Advertisement
Uso correcto de los hooks
Los hooks deben usarse dentro de componentes o incluso dentro de otros hooks, no en métodos arbitrarios.
❌ Mala práctica
// ❌ Hook usado en una función regular
function getCauseCustomLabel(cause) {
const { t } = useTranslation(); // ❌ Error: Hook fuera de componente
return t(`causes.${cause}`);
}
function MyComponent() {
const label = getCauseCustomLabel('environmental');
return <div>{label}</div>;
}Regla violada: react-hooks/rules-of-hooks
✅ Buena práctica
// ✅ Hook usado dentro del componente
function MyComponent() {
const { t } = useTranslation();
const getCauseCustomLabel = (cause) => {
return t(`causes.${cause}`);
};
const label = getCauseCustomLabel('environmental');
return <div>{label}</div>;
}
// O mejor aún, crear un custom hook
function useCauseLabel() {
const { t } = useTranslation();
return (cause) => t(`causes.${cause}`);
}Asignar keys únicos en iteraciones con map
Asegúrate de proporcionar una key única a los elementos generados en un bucle map.
❌ Mala práctica
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
// ❌ Sin key o usando index
<li>{todo.text}</li>
))}
</ul>
);
}Regla violada: react/jsx-key
✅ Buena práctica
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
// ✅ Key única basada en ID
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
}Actualizar valores mutables correctamente en hooks
Si necesitas actualizar un valor mutable desde un hook, utiliza useState o useRef para evitar pérdida de estado en cada render.
❌ Mala práctica
function MyComponent() {
let flag = false; // ❌ Variable local se reinicia en cada render
useEffect(() => {
flag = true; // ❌ Cambio se pierde
}, []);
return <div>{flag ? 'Active' : 'Inactive'}</div>;
}Regla violada: react-hooks/exhaustive-deps
✅ Buena práctica
function MyComponent() {
// ✅ Usando useRef para valores mutables
const flagRef = useRef(false);
// O mejor, useState si necesitas re-render
const [flag, setFlag] = useState(false);
useEffect(() => {
flagRef.current = true;
// o setFlag(true);
}, []);
return <div>{flag ? 'Active' : 'Inactive'}</div>;
}Advertisement
Correcto uso de valores mutables
Mueve las constantes utilizadas en el array de dependencias de un hook dentro de un useCallback o inicialízalas con useMemo para evitar cambios innecesarios.
❌ Mala práctica
function MyComponent() {
const payload = { type: 'USER_DATA' }; // ❌ Se recrea en cada render
useEffect(() => {
fetchData(payload);
}, [payload]); // ⚠️ payload cambia en cada render
return <div>Content</div>;
}Regla violada: react-hooks/exhaustive-deps
✅ Buena práctica
function MyComponent() {
// ✅ Memoizar el objeto
const payload = useMemo(() => ({ type: 'USER_DATA' }), []);
// O usar useCallback para la función
const fetchUserData = useCallback(() => {
const payload = { type: 'USER_DATA' };
fetchData(payload);
}, []);
useEffect(() => {
fetchUserData();
}, [fetchUserData]);
return <div>Content</div>;
}Generales
Aplica las buenas prácticas de Gitflow
Crea ramas por cada tarea asignada y realiza solicitudes de extracción (PRs/MRs) cortas para que los revisores puedan analizar a fondo cada lógica implementada.
Ejemplo de flujo:
feature/add-user-authenticationbugfix/fix-login-validationhotfix/critical-security-patch
Escuchar consejos y preguntar dudas
Siempre considera los consejos y criterios de tus compañeros y no dudes en preguntar antes de comenzar un enfoque.
Aplicar las buenas prácticas en lugar de solo conocerlas
Las buenas prácticas están diseñadas para aplicarlas, no solo para saber que existen. Hagamos mejor código para que sea escalable en el tiempo.
Resumen de Reglas ESLint Mencionadas
| Regla | Descripción |
|---|---|
react-hooks/rules-of-hooks | Los hooks deben llamarse en el nivel superior |
react-hooks/exhaustive-deps | Verificar dependencias en hooks |
react/jsx-key | Elementos en listas deben tener key única |
no-mixed-operators | Usar paréntesis para claridad en expresiones |
Recursos Adicionales
¿Aplicas estas buenas prácticas en tus proyectos? ¡Comparte este artículo con tu equipo para mejorar la calidad del código!
Advertisement
Angel LM
Full-stack developer passionate about creating beautiful and functional web applications. Sharing knowledge about React, Next.js, and modern web development.
