React se ha convertido en una de las bibliotecas más populares para el desarrollo de interfaces de usuario. Sin embargo, desarrollar aplicaciones React escalables y mantenibles requiere seguir ciertas mejores prácticas y patrones establecidos por la comunidad.
React has become one of the most popular libraries for user interface development. However, developing scalable and maintainable React applications requires following certain best practices and patterns established by the community.
Consejo Profesional
Pro Tip
Estas prácticas han sido probadas en proyectos de producción y ayudan a prevenir problemas comunes en el desarrollo con React.
These practices have been tested in production projects and help prevent common problems in React development.
1. Estructura de Proyecto
1. Project Structure
Una estructura de proyecto bien organizada es fundamental para la escalabilidad y mantenibilidad. Recomendamos la siguiente estructura:
A well-organized project structure is essential for scalability and maintainability. We recommend the following structure:
src/
├── components/ # Componentes reutilizables
│ ├── common/ # Componentes comunes (Button, Input, etc.)
│ ├── forms/ # Componentes de formulario
│ └── layout/ # Componentes de diseño (Header, Footer, etc.)
├── pages/ # Componentes de página
├── hooks/ # Custom hooks
├── services/ # Lógica de API y servicios
├── utils/ # Utilidades y helpers
├── constants/ # Constantes de la aplicación
├── contexts/ # React contexts
├── styles/ # Estilos globales y temas
└── assets/ # Imágenes, fuentes, etc.
Organización por funcionalidad
Organization by functionality
Agrupa los archivos por funcionalidad en lugar de por tipo. Esto hace que sea más fácil encontrar y modificar código relacionado.
Group files by functionality rather than by type. This makes it easier to find and modify related code.
2. Componentes Funcionales y Hooks
2. Functional Components and Hooks
Desde la introducción de los Hooks en React 16.8, los componentes funcionales se han convertido en el estándar. Aquí hay algunas mejores prácticas para su uso:
Since the introduction of Hooks in React 16.8, functional components have become the standard. Here are some best practices for their use:
useState y useEffect
useState and useEffect
// ✅ Buen uso de useState y useEffect
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchUser = async () => {
try {
setLoading(true);
const userData = await userService.getUser(userId);
setUser(userData);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchUser();
}, [userId]); // Dependencia correcta
if (loading) return <div>Cargando...</div>;
if (error) return <div>Error: {error}</div>;
if (!user) return <div>Usuario no encontrado</div>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}
Evita dependencias incorrectas
Avoid incorrect dependencies
Siempre incluye todas las dependencias en el array de useEffect. Usa eslint-plugin-react-hooks para detectar dependencias faltantes.
Always include all dependencies in the useEffect array. Use eslint-plugin-react-hooks to detect missing dependencies.
3. Gestión de Estado
3. State Management
Elegir la estrategia correcta para la gestión de estado es crucial. Aquí hay algunas recomendaciones:
Choosing the right strategy for state management is crucial. Here are some recommendations:
- Estado Local: Usa useState para estado que solo afecta a un componente
- Estado Global: Considera Context API para estado compartido entre pocos componentes
- Estado Complejo: Usa bibliotecas como Redux Toolkit o Zustand para aplicaciones grandes
- Local State: Use useState for state that only affects one component
- Global State: Consider Context API for state shared between few components
- Complex State: Use libraries like Redux Toolkit or Zustand for large applications
// ✅ Ejemplo de Context API para estado global
import React, { createContext, useContext, useReducer } from 'react';
const AppStateContext = createContext();
const initialState = {
user: null,
theme: 'light',
notifications: []
};
function appReducer(state, action) {
switch (action.type) {
case 'SET_USER':
return { ...state, user: action.payload };
case 'SET_THEME':
return { ...state, theme: action.payload };
case 'ADD_NOTIFICATION':
return {
...state,
notifications: [...state.notifications, action.payload]
};
default:
return state;
}
}
export function AppStateProvider({ children }) {
const [state, dispatch] = useReducer(appReducer, initialState);
return (
<AppStateContext.Provider value={{ state, dispatch }}>
{children}
</AppStateContext.Provider>
);
}
export function useAppState() {
const context = useContext(AppStateContext);
if (!context) {
throw new Error('useAppState must be used within AppStateProvider');
}
return context;
}
4. Optimización de Rendimiento
4. Performance Optimization
React es rápido por defecto, pero en aplicaciones grandes es importante optimizar el rendimiento:
React is fast by default, but in large applications it's important to optimize performance:
React.memo, useMemo y useCallback
React.memo, useMemo and useCallback
// ✅ Uso correcto de useMemo y useCallback
import React, { useState, useMemo, useCallback } from 'react';
function ExpensiveComponent({ items, onItemClick }) {
// useMemo para cálculos costosos
const processedItems = useMemo(() => {
return items.map(item => ({
...item,
computedValue: heavyComputation(item)
}));
}, [items]); // Solo se recalcula cuando items cambia
// useCallback para funciones estables
const handleClick = useCallback((itemId) => {
onItemClick(itemId);
}, [onItemClick]); // Solo se recrea cuando onItemClick cambia
return (
<div>
{processedItems.map(item => (
<MemoizedItem
key={item.id}
item={item}
onClick={handleClick}
/>
))}
</div>
);
}
// React.memo para evitar re-renderizados innecesarios
const MemoizedItem = React.memo(function Item({ item, onClick }) {
return (
<div onClick={() => onClick(item.id)}>
{item.name}
</div>
);
});
Optimiza solo cuando sea necesario
Optimize only when necessary
No optimices prematuramente. Usa React.memo, useMemo y useCallback solo cuando identifiques problemas de rendimiento reales.
Don't optimize prematurely. Use React.memo, useMemo and useCallback only when you identify real performance issues.
5. Testing
5. Testing
Escribir tests es esencial para mantener la calidad del código. Recomendamos:
Writing tests is essential to maintain code quality. We recommend:
// ✅ Ejemplo de testing con React Testing Library
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SearchForm from './SearchForm';
test('should submit search form with correct value', async () => {
const handleSubmit = jest.fn();
render(<SearchForm onSubmit={handleSubmit} />);
const searchInput = screen.getByLabelText(/search/i);
const submitButton = screen.getByRole('button', { name: /search/i });
// Simular interacción del usuario
await userEvent.type(searchInput, 'react');
await userEvent.click(submitButton);
expect(handleSubmit).toHaveBeenCalledWith('react');
});
test('should display validation error for empty search', async () => {
render(<SearchForm onSubmit={jest.fn()} />);
const submitButton = screen.getByRole('button', { name: /search/i });
await userEvent.click(submitButton);
expect(screen.getByText(/please enter a search term/i)).toBeInTheDocument();
});
Conclusión
Conclusion
Seguir estas mejores prácticas te ayudará a desarrollar aplicaciones React más robustas, escalables y mantenibles. Recuerda que cada proyecto es único, así que adapta estas recomendaciones según tus necesidades específicas.
Following these best practices will help you develop more robust, scalable and maintainable React applications. Remember that each project is unique, so adapt these recommendations according to your specific needs.
Equipo SalvonixTech
Especialistas en desarrollo web y móvil con sede en Barcelona.
Web and mobile development specialists based in Barcelona.
