5 buenas prácticas en React que debes conocer

Después de años desarrollando con React y enseñando a cientos de estudiantes, estas son las 5 prácticas que más impacto tienen en la calidad del código. No son reglas arbitrarias, son patrones que previenen bugs y hacen el código más mantenible.

1. Componentes pequeños con responsabilidad única

Un componente debe hacer UNA cosa bien. Si tu componente tiene más de 100 líneas, probablemente hace demasiado.

tsx

// ❌ Malo: Componente que hace todofunction UserDashboard() {  const [user, setUser] = useState(null);  const [posts, setPosts] = useState([]);  const [notifications, setNotifications] = useState([]);  // ... 200 líneas más de lógica  return (    <div>      {/* Header, sidebar, content, footer... */}    </div>  );}// ✅ Bueno: Componentes con responsabilidad únicafunction UserDashboard() {  return (    <div>      <DashboardHeader />      <div className="flex">        <Sidebar />        <main>          <UserProfile />          <RecentPosts />          <NotificationList />        </main>      </div>    </div>  );}

🎬 ¿Te está gustando este contenido? Tenemos más tutoriales en video en nuestro canal de YouTube.

2. Custom hooks para lógica reutilizable

Si tienes lógica de estado que se repite, extráela a un custom hook:

tsx

// ❌ Malo: Lógica duplicada en varios componentesfunction ProductPage() {  const [loading, setLoading] = useState(false);  const [error, setError] = useState(null);  const [data, setData] = useState(null);  useEffect(() => {    setLoading(true);    fetch('/api/product')      .then(res => res.json())      .then(setData)      .catch(setError)      .finally(() => setLoading(false));  }, []);  // ...}// ✅ Bueno: Custom hook reutilizablefunction useFetch<T>(url: string) {  const [state, setState] = useState<{    loading: boolean;    error: Error | null;    data: T | null;  }>({    loading: true,    error: null,    data: null,  });  useEffect(() => {    fetch(url)      .then(res => res.json())      .then(data => setState({ loading: false, error: null, data }))      .catch(error => setState({ loading: false, error, data: null }));  }, [url]);  return state;}// Uso limpiofunction ProductPage() {  const { loading, error, data } = useFetch<Product>('/api/product');  if (loading) return <Spinner />;  if (error) return <Error message={error.message} />;  return <ProductDetails product={data} />;}

3. Evita prop drilling con composición

Antes de meter Context o Redux, considera la composición:

tsx

// ❌ Malo: Prop drilling a través de múltiples nivelesfunction App() {  const user = useUser();  return <Layout user={user} />;}function Layout({ user }) {  return <Header user={user} />;}function Header({ user }) {  return <UserMenu user={user} />;}function UserMenu({ user }) {  return <span>{user.name}</span>;}// ✅ Bueno: Composición con childrenfunction App() {  const user = useUser();  return (    <Layout>      <Header>        <UserMenu user={user} />      </Header>    </Layout>  );}function Layout({ children }) {  return <div className="layout">{children}</div>;}function Header({ children }) {  return <header>{children}</header>;}

4. Manejo de estado cerca de donde se usa

El estado debe vivir lo más cerca posible de donde se necesita:

tsx

// ❌ Malo: Estado global para todoconst globalStore = create((set) => ({  searchQuery: '',  setSearchQuery: (query) => set({ searchQuery: query }),  // ... estado de formulario, modales, todo mezclado}));// ✅ Bueno: Estado local cuando es posiblefunction SearchBar() {  const [query, setQuery] = useState('');  return (    <input      value={query}      onChange={(e) => setQuery(e.target.value)}    />  );}// Solo sube el estado cuando REALMENTE se compartefunction ProductList() {  const [filters, setFilters] = useState({    category: 'all',    priceRange: [0, 1000],  });  return (    <div>      <FilterPanel filters={filters} onChange={setFilters} />      <ProductGrid filters={filters} />    </div>  );}

5. Keys únicas y estables

Las keys son para React, no para ti. Deben ser únicas Y estables:

tsx

// ❌ Muy malo: Índice del array como key{items.map((item, index) => (  <Item key={index} item={item} />))}// ❌ Malo: Key generada aleatoriamente{items.map((item) => (  <Item key={Math.random()} item={item} />))}// ✅ Bueno: ID único y estable{items.map((item) => (  <Item key={item.id} item={item} />))}// ✅ También válido si no hay ID{items.map((item) => (  <Item key={`${item.name}-${item.createdAt}`} item={item} />))}

Bonus: Estructura de archivos por feature

Organiza tu código por funcionalidad, no por tipo:

// ❌ Malo: Por tipo de archivosrc/  components/    Header.tsx    UserMenu.tsx    ProductCard.tsx  hooks/    useUser.ts    useProducts.ts  utils/    formatPrice.ts// ✅ Bueno: Por featuresrc/  features/    auth/      components/        LoginForm.tsx        UserMenu.tsx      hooks/        useAuth.ts      api/        auth.ts    products/      components/        ProductCard.tsx        ProductList.tsx      hooks/        useProducts.ts      utils/        formatPrice.ts

Conclusión

Estas prácticas no son dogmas, son guías. Lo importante es entender el por qué:

Componentes pequeños → Más fáciles de testear y reutilizar
Custom hooks → Lógica compartida sin duplicación
Composición → Flexibilidad sin acoplar componentes
Estado local → Menos complejidad, mejor rendimiento
Keys estables → React puede optimizar el rendering

Aplícalas con criterio y tu código React será más mantenible y predecible.

Abrazo. bliss.

5 buenas prácticas en React que debes conocer

Héctorbliss

1. Componentes pequeños con responsabilidad única

2. Custom hooks para lógica reutilizable

3. Evita prop drilling con composición

4. Manejo de estado cerca de donde se usa

5. Keys únicas y estables

Bonus: Estructura de archivos por feature

Conclusión

Configurando Caddy Server: El secreto para fácilmente usar https y reverse proxy en tus proyectos web

Checa este otro Post

Cómo Publicar tu proyecto Vite en Github Pages con el método más fácil

Checa este otro Post

Animaciones web con React + Motion 🧙🏻