Misión 1 · Lección 2

Hooks en Componentes Funcionales

Objetivos

• Entender qué son los Hooks y por qué se usan.
• Usar useState para manejar estado.
• Usar useEffect para efectos secundarios.
• Explorar otros hooks básicos: useRef, useContext.

¿Qué son los Hooks?

• Funciones especiales de React que permiten “enganchar” lógica en componentes funcionales.
• Antes, solo los componentes de clase podían manejar estado y ciclo de vida.
• Ahora los Hooks hacen a los componentes funcionales igual de potentes.

Reglas de los Hooks

• ⚠️ Solo se llaman en la parte superior del componente (no dentro de bucles ni condicionales).
• ⚠️ Solo se usan dentro de componentes funcionales o de otros hooks.

useState

Maneja estado local en un componente.

import { useState } from "react";

export default function Contador() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clics: {count}
    </button>
  );
}

useState con objetos

const [usuario, setUsuario] = useState({
  nombre: "Ana",
  edad: 25
});

function actualizarNombre() {
  setUsuario({ ...usuario, nombre: "María" });
}

Usa el operador ... (spread) para no perder propiedades previas.

useEffect

Permite ejecutar código cuando el componente se renderiza o cambian dependencias.

import { useState, useEffect } from "react";

export default function DatosUsuario({ id }) {
  const [usuario, setUsuario] = useState(null);

  useEffect(() => {
    fetch(`/api/usuarios/${id}`)
      .then(res => res.json())
      .then(data => setUsuario(data));
  }, [id]);

  return usuario ? <p>{usuario.nombre}</p> : <p>Cargando...</p>;
}

Limpieza en useEffect

Ideal para limpiar suscripciones, temporizadores o listeners.

useEffect(() => {
  const timer = setInterval(() => {
    console.log("tick");
  }, 1000);

  return () => clearInterval(timer); // limpieza
}, []);

Otros Hooks básicos

• useRef → referencia mutable a un valor o elemento DOM.
• useContext → consume valores de un contexto global.
• useReducer → maneja estados complejos con un reducer.
• useMemo y useCallback → optimizan cálculos y funciones.

Ejercicio Guiado 🛠️

1. Crea un componente <Reloj /> que muestre la hora actual usando useState.
2. Usa useEffect para actualizar la hora cada segundo con setInterval.
3. Asegúrate de limpiar el intervalo en el return del efecto.