Cheatsheet de Hooks de React: useState, useEffect, useRef, useMemo y useCallback

Hooks de React sin adivinanzas: patrones de useState y useEffect, cuándo las refs ganan al estado, useMemo y useCallback bien usados, contexto, reducers y las reglas de los hooks.

🧪

Ejecuta y Edita este Código en Vivo Sin instalaciones locales. Soporta Python 3, JS y SQL.

▶ Probar en Playground →

1. useState y useEffect: la pareja diaria

El estado provoca re-renderizados; los efectos sincronizan con lo que está fuera de React (red, temporizadores, el DOM). Limpia siempre suscripciones e intervalos, y declara cada dependencia que uses.

CODE SNIPPET

import { useState, useEffect } from "react";

function UserCard({ userId }) {
  const [user, setUser] = useState(null);
  const [count, setCount] = useState(0);

  // Actualización funcional: segura cuando el valor nuevo depende del anterior
  const bump = () => setCount(c => c + 1);

  useEffect(() => {
    let cancelled = false;
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => { if (!cancelled) setUser(data); });
    return () => { cancelled = true; };   // limpieza al desmontar o re-ejecutar
  }, [userId]);                            // se repite cuando userId cambia

  if (!user) return <p>Loading…</p>;
  return <button onClick={bump}>{user.name}: {count}</button>;
}

2. useRef, useMemo y useCallback

Recurre a ellos solo cuando puedas nombrar el problema que resuelven: un valor que debe persistir sin re-renderizar, un cálculo costoso o una identidad de función de la que depende un hijo memorizado.

Hook	Úsalo para	Recuerda
`useRef(initial)`	Nodos del DOM, temporizadores, valores previos	Cambiar .current nunca re-renderiza
`useMemo(() => calc, [deps])`	Valores derivados costosos	Es una herramienta de rendimiento, no de corrección
`useCallback(fn, [deps])`	Identidad de función estable para hijos memorizados	Combínalo con React.memo en el hijo
`useId()`	Ids únicos para etiquetas de formulario y ARIA	Estable entre renderizado de servidor y cliente
`useTransition()`	Marcar actualizaciones como no urgentes	Mantiene la UI fluida durante renders pesados
`useDeferredValue(v)`	Renderizar una copia rezagada de un valor que cambia rápido	Ideal para buscadores sobre listas grandes

3. useContext y useReducer

El contexto comparte valores por el árbol sin pasar props nivel a nivel (tema, usuario actual, idioma). Un reducer centraliza las transiciones de estado cuando las actualizaciones tienen nombres y reglas.

CODE SNIPPET

const ThemeContext = createContext("light");

<ThemeContext.Provider value="dark">
  <Toolbar />
</ThemeContext.Provider>

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>…</div>;
}

// Reducer: un solo lugar decide cómo cambia el estado
function reducer(state, action) {
  switch (action.type) {
    case "add":    return [...state, action.item];
    case "remove": return state.filter(i => i.id !== action.id);
    default:       return state;
  }
}
const [items, dispatch] = useReducer(reducer, []);
dispatch({ type: "add", item: newItem });

4. Reglas de los hooks y tu primer hook personalizado

Los hooks funcionan porque React los sigue por orden de llamada. Si rompes ese orden, el estado se engancha en silencio al hook equivocado.

Llama a los hooks solo en el nivel superior: nunca dentro de bucles, condiciones ni funciones anidadas.
Llama a los hooks solo desde funciones de React: componentes u otros hooks personalizados, nunca funciones JavaScript normales.
Empieza los hooks personalizados con "use" para que el linter pueda aplicar las reglas dentro de ellos.
Todo valor que usa un efecto va en su array de dependencias: calla al linter reestructurando, no borrando dependencias.

CODE SNIPPET

// Hook personalizado: lógica con estado reutilizable por cualquier componente
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return width;
}