Más hooks: useRef, useReducer y hooks propios

⏱ 55 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Acceder al DOM y guardar valores mutables con useRef.
Organizar estados complejos con useReducer.
Saber cuándo (y cuándo no) memorizar.
Crear y reutilizar hooks personalizados.

1.useRef: una referencia que no provoca dibujos

useRef devuelve un objeto que se conserva entre dibujos y cuya propiedad .current puedes leer y cambiar sin que React vuelva a dibujar. Tiene dos usos principales:

Uso	Ejemplo
Acceder a un elemento del DOM	Enfocar un campo, hacer scroll, medir un tamaño, reproducir un video
Guardar un valor mutable que no se muestra	El id de un temporizador, el valor anterior de algo, un contador interno

⚛️ Enfocar un campo con una referencia

Código (edítalo y pulsa Ejecutar)

import { useRef } from "react";

function App() {
  const campo = useRef(null);

  function enfocar() {
    campo.current.focus();          // .current es el <input> real del DOM
  }

  return (
    <main>
      <input ref={campo} placeholder="Escribe aquí" />{" "}
      <button onClick={enfocar}>Enfocar el campo</button>
    </main>
  );
}

Resultado

Consola

⚛️ Guardar un valor sin redibujar

Código (edítalo y pulsa Ejecutar)

import { useRef, useState } from "react";

function App() {
  const [veces, setVeces] = useState(0);
  const pulsaciones = useRef(0);            // no provoca dibujo al cambiar

  function pulsar() {
    pulsaciones.current += 1;
    console.log("Ref:", pulsaciones.current, "· Estado (aún):", veces);
  }

  return (
    <main>
      <button onClick={pulsar}>Cambiar ref (la pantalla no cambia)</button>{" "}
      <button onClick={() => setVeces(veces + 1)}>Cambiar estado (sí redibuja)</button>
      <p>Estado: {veces} · Ref actual al dibujar: {pulsaciones.current}</p>
    </main>
  );
}

Resultado

Consola

⚠️ Importante · Estado frente a referencia

Si el valor se muestra en pantalla, debe ser estado. Si solo lo necesitas «recordar» sin dibujarlo, usa una referencia. No leas ni escribas ref.current mientras dibujas (en el cuerpo del componente): hazlo en eventos y efectos.

2.useReducer: estado con muchas acciones

Cuando un estado tiene muchas formas de cambiar (agregar, quitar, editar, vaciar…), repartir setX por todo el componente se desordena. useReducer concentra toda la lógica en una sola función, el reductor, que recibe el estado actual y una acción y devuelve el estado nuevo.

const [

estadoestado actual

dispatchenvía acciones

] = useReducer(

reductorreglas de cambio

inicialestado inicial

);

⚛️ Un contador con acciones

Código (edítalo y pulsa Ejecutar)

import { useReducer } from "react";

// Una función pura: (estado, acción) → estado nuevo
function reductor(estado, accion) {
  switch (accion.tipo) {
    case "sumar":     return { ...estado, cuenta: estado.cuenta + 1 };
    case "restar":    return { ...estado, cuenta: estado.cuenta - 1 };
    case "reiniciar": return { ...estado, cuenta: 0 };
    default:          throw new Error("Acción desconocida: " + accion.tipo);
  }
}

function App() {
  const [estado, dispatch] = useReducer(reductor, { cuenta: 0 });

  return (
    <main>
      <p>Cuenta: {estado.cuenta}</p>
      <button onClick={() => dispatch({ tipo: "sumar" })}>+1</button>{" "}
      <button onClick={() => dispatch({ tipo: "restar" })}>-1</button>{" "}
      <button onClick={() => dispatch({ tipo: "reiniciar" })}>Reiniciar</button>
    </main>
  );
}

Resultado

Consola

`useState`	`useReducer`
Estados simples (un número, un texto, un booleano)	Estados complejos (objetos con varias partes o listas con muchas operaciones)
Pocas formas de cambiar	Muchas acciones relacionadas
La lógica está en los manejadores de eventos	La lógica está centralizada y es fácil de probar

💡 Consejo · Reductor + Context

La combinación useReducer + Context es la «mini Redux» que muchas aplicaciones medianas necesitan. La verás completa en el proyecto final.

3.useMemo y useCallback: optimizar con cabeza

React es rápido por defecto. Solo cuando midas un problema de rendimiento te servirán estas dos herramientas, que recuerdan un resultado entre dibujos:

Hook	Recuerda…	Se recalcula cuando…
`useMemo(() => cálculo, [deps])`	El resultado de un cálculo costoso	cambia alguna dependencia
`useCallback(fn, [deps])`	La función misma (misma referencia)	cambia alguna dependencia

⚛️ useMemo: no repetir un cálculo pesado

Código (edítalo y pulsa Ejecutar)

import { useMemo, useState } from "react";

function primosHasta(n) {
  console.log("🔢 Calculando primos hasta", n);
  const lista = [];
  for (let i = 2; i <= n; i++) {
    let esPrimo = true;
    for (let j = 2; j * j <= i; j++) if (i % j === 0) { esPrimo = false; break; }
    if (esPrimo) lista.push(i);
  }
  return lista;
}

function App() {
  const [limite, setLimite] = useState(1000);
  const [contador, setContador] = useState(0);

  // Solo se recalcula cuando cambia «limite»
  const primos = useMemo(() => primosHasta(limite), [limite]);

  return (
    <main>
      <p>Hay {primos.length} primos hasta {limite}.</p>
      <button onClick={() => setLimite(limite + 1000)}>Aumentar límite</button>{" "}
      <button onClick={() => setContador(contador + 1)}>Otro estado: {contador}</button>
      <p><small>Pulsa el segundo botón: la consola no repite el cálculo.</small></p>
    </main>
  );
}

Resultado

Consola

⚠️ Importante · No los uses «por si acaso»

Memorizar tiene un costo (memoria y código más difícil de leer). Empieza sin ellos, mide con las herramientas de desarrollo y úsalos donde de verdad haya lentitud. useCallback solo aporta algo cuando pasas la función a un componente envuelto en memo o a las dependencias de un efecto.

4.Hooks personalizados: reutilizar lógica

Un hook personalizado es una función cuyo nombre empieza por use y que usa otros hooks dentro. Sirve para extraer lógica con estado y reutilizarla en varios componentes, igual que un componente reutiliza JSX.

⚛️ useToggle y useContador

Código (edítalo y pulsa Ejecutar)

import { useState } from "react";

// Hook 1: alternar un booleano
function useToggle(inicial = false) {
  const [valor, setValor] = useState(inicial);
  const alternar = () => setValor((v) => !v);
  return [valor, alternar];
}

// Hook 2: un contador con límites
function useContador(inicial = 0, max = 10) {
  const [n, setN] = useState(inicial);
  return {
    n,
    sumar: () => setN((v) => Math.min(max, v + 1)),
    restar: () => setN((v) => Math.max(0, v - 1)),
    reiniciar: () => setN(inicial),
  };
}

function Panel() {
  const [abierto, alternar] = useToggle();
  return (
    <section>
      <button onClick={alternar}>{abierto ? "Cerrar" : "Abrir"} panel</button>
      {abierto && <p>Contenido del panel</p>}
    </section>
  );
}

function Votos() {
  const { n, sumar, restar } = useContador(0, 5);
  return <p>Votos: {n} <button onClick={sumar}>+</button> <button onClick={restar}>−</button></p>;
}

function App() {
  return <main><Panel /><Votos /><Votos /></main>;
}

Resultado

Consola

📌 Nota · Se comparte la lógica, no el estado

Cada vez que usas un hook personalizado, cada componente obtiene su propio estado. Los dos <Votos /> tienen contadores separados aunque usen el mismo hook.

Un clásico: useLocalStorage

function useLocalStorage(clave, inicial) {
  const [valor, setValor] = useState(() => {
    const guardado = localStorage.getItem(clave);
    return guardado !== null ? JSON.parse(guardado) : inicial;
  });

  useEffect(() => {
    localStorage.setItem(clave, JSON.stringify(valor));
  }, [clave, valor]);

  return [valor, setValor];
}

// Se usa igual que useState, pero persiste
const [nombre, setNombre] = useLocalStorage("nombre", "");

5.Las reglas de los hooks

Solo en el nivel superior: no los llames dentro de if, bucles ni funciones anidadas.
Solo en componentes o en otros hooks: no en funciones normales de JavaScript.
Los hooks personalizados empiezan por use: así las herramientas reconocen que son hooks y vigilan las reglas.

💡 Consejo · Instala el linter

Los proyectos de Vite traen eslint-plugin-react-hooks, que te avisa si rompes estas reglas o si olvidas una dependencia. Es de las ayudas más valiosas al aprender.

6.Errores frecuentes

Usar ref.current para algo que se muestra: la pantalla no se actualizará; usa estado.
Leer ref.current mientras dibujas: puede estar null en el primer dibujo.
Mutar el estado dentro del reductor: debe devolver siempre un objeto nuevo.
Olvidar el default del reductor: una acción mal escrita pasa desapercibida.
Usar useMemo por todas partes: añade complejidad sin beneficio medido.
Dependencias incompletas en useMemo y useCallback: devuelven valores viejos.
Un hook personalizado sin use al inicio: React no puede comprobar las reglas.

📒 Apuntes para llevar

useRef guarda un valor mutable que no redibuja y da acceso a elementos del DOM (ref={campo} → campo.current).
Si se muestra en pantalla, es estado; si solo se recuerda, es ref.
useReducer(reductor, inicial) centraliza los cambios de un estado complejo con acciones (dispatch({ tipo })).
El reductor es una función pura: (estado, acción) → estado nuevo.
useMemo recuerda un resultado; useCallback recuerda una función. Úsalos solo si mides un problema.
Un hook personalizado (useAlgo) extrae lógica con estado para reutilizarla.
Reglas de los hooks: nivel superior y solo en componentes u otros hooks.

7.Glosario

Término	Significado
`useRef`	Hook que devuelve un objeto `{ current }` estable entre dibujos.
`useReducer`	Hook para manejar estado complejo mediante un reductor y acciones.
Reductor (reducer)	Función pura que recibe estado y acción y devuelve el nuevo estado.
Acción	Objeto que describe qué ocurrió, por ejemplo `{ tipo: "sumar" }`.
`useMemo`	Hook que recuerda el resultado de un cálculo mientras no cambien sus dependencias.
`useCallback`	Hook que recuerda una función con la misma referencia entre dibujos.
Hook personalizado	Función `useAlgo` que reutiliza lógica con hooks entre componentes.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Qué ocurre al cambiar miRef.current?

Necesitas enfocar un <input> al pulsar un botón. ¿Qué usas?

Con ref={campo} accedes al elemento real y llamas a campo.current.focus().

¿Qué debe devolver un reductor?

¿Cuál es un nombre válido para un hook personalizado?

Los hooks personalizados empiezan por use.

¿Cuándo conviene usar useMemo?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio