5 patrones de React que uso en producción

Después de construir varias apps del ecosistema, estos son los patrones de React que más repito. Nada exótico — cosas que escalan y no me traicionan tres meses después.

1. Custom hooks para lógica, no para todo

Un hook por preocupación. Si un hook hace tres cosas, son tres hooks.

function useDebouncedValue<T>(value: T, ms = 300): T {
  const [v, setV] = useState(value)
  useEffect(() => {
    const id = setTimeout(() => setV(value), ms)
    return () => clearTimeout(id)
  }, [value, ms])
  return v
}

2. Estado derivado, no duplicado

Si puedes calcularlo, no lo guardes en estado. Menos useState, menos bugs de sincronización.

3. Componentes tontos + contenedores

La UI no debería saber de dónde vienen los datos. Eso hace que conectar un CMS o una API después sea trivial.

4. Zustand para estado global ligero

Redux es mucho para la mayoría de apps. Zustand da el 90% con el 10% del ceremonial.

5. Suspense + lazy para el peso

Carga diferida por ruta y por componente pesado. El primer render tiene que volar.

Ninguno es mágico. Juntos hacen que el código de hoy sea amable con el yo del futuro.