React Hooks: cómo usarlos bien (y no escribir código innecesariamente complejo)

Aprender React Hooks es fácil. Usarlos bien… no tanto. He visto proyectos donde usan useState, useEffect, useMemo, useCallback… y el código termina siendo más difícil de entender que antes. Ese es el problema: usar Hooks no significa escribir mejor código.

El error más común con Hooks

Muchos developers hacen esto:

const [count, setCount] = useState(0);

Hasta ahí todo bien. El problema empieza cuando:

• mezclas lógica

• repites código

• no separas responsabilidades

Y terminas con componentes imposibles de mantener.

useState: simple, pero mal usado

const [user, setUser] = useState({ name: '', email: '' });

// ❌ error común
setUser({ name: 'Juan' });

// ✅ correcto
setUser(prev => ({ ...prev, name: 'Juan' }));

No es complicado… pero muchos lo hacen mal.

useEffect: donde más errores se cometen

Este hook rompe muchos proyectos.

useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

Esto funciona. Pero el problema real está aquí:

• dependencias mal definidas

• loops infinitos

• memory leaks

useEffect no es difícil… pero es fácil usarlo mal.

Custom Hooks: aquí empieza el código limpio

Este es el punto donde mejoras como developer.

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData);
  }, [url]);

  return data;
}

Ahora tu código:

• es reutilizable

• es más limpio

• es más fácil de mantener

useMemo y useCallback: donde muchos se complican

Este es el error típico:

const memo = useMemo(() => compute(), []);

Usarlo “porque sí”. No todo necesita optimización. Úsalos solo cuando:

• hay cálculos costosos

• hay renders innecesarios

La diferencia entre usar Hooks… y saber usarlos

La mayoría sabe escribir esto:

useState
useEffect

Pocos saben:

• cuándo usar cada uno

• cuándo NO usarlos

• cómo estructurar lógica

Y ahí es donde se nota el nivel.

Conclusión

React Hooks no hacen tu código mejor automáticamente. Tú lo haces mejor cuando:

• piensas en estructura

• evitas complejidad innecesaria

• separas responsabilidades

El mejor código no es el que usa más Hooks. Es el que se entiende más rápido. Si estás trabajando con React y quieres estructurar mejor tus proyectos para que escalen y sean mantenibles, puedo ayudarte a hacerlo correctamente.

Escríbeme y vemos tu caso.