React Hooks esenciales

React Hooks esenciales

🔹 useEffect — Manejar Ciclo de Vida

useEffect es como componentDidMount, componentDidUpdate y componentWillUnmount todo en uno. Sirve para ejecutar efectos secundarios después del renderizado: llamadas a APIs, modificar el DOM, suscribirse a eventos, etc.

📋 Ejemplo básico:

import { useEffect, useState } from "react";
function App() {
  const [contador, setContador] = useState(0);
  useEffect(() => {
    console.log("El componente se renderizó o el contador cambió");
  }, [contador]);
  // 👈 depende del contador
  return (
    <div>
      {" "}
      <p>Contador: {contador}</p>{" "}
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>{" "}
    </div>
  );
}

✅ Cada vez que cambia contador, el useEffect se ejecuta.

📋 useEffect con cleanup (cuando el componente se desmonta):

useEffect(() => {
  const intervalo = setInterval(() => {
    console.log("Tick");
  }, 1000);
  return () => {
    clearInterval(intervalo); // 🔥 Limpiamos el intervalo
    console.log("Intervalo limpiado");
  };
}, []);

[] significa que se ejecuta solo una vez (cuando el componente se monta y cuando se desmonta).

🔹 useRef — Referencias mutables

useRef guarda una referencia que NO causa re-render cuando cambia. Muy útil para:

• Acceder a un elemento del DOM
• Guardar valores mutables entre renders

📋 Ejemplo: referenciar un input

import { useRef } from "react";
function App() {
  const inputRef = useRef();
  const enfocarInput = () => {
    inputRef.current.focus(); // 🔥 Accedemos directamente al DOM
  };
  return (
    <div>
      {" "}
      <input ref={inputRef} type="text" />{" "}
      <button onClick={enfocarInput}>Enfocar input</button>{" "}
    </div>
  );
}

🔹 useMemo — Memorizar un valor para optimizar

useMemo guarda el resultado de una función costosa para no recalcularlo en cada render.

Importante: Solo recalcula cuando sus dependencias cambian.

📋 Ejemplo: cálculo pesado

import { useMemo, useState } from "react";
function App() {
  const [contador, setContador] = useState(0);
  const numeroPesado = useMemo(() => {
    console.log("Calculando número pesado...");
    return contador * 1000;
  }, [contador]); // 👈 depende del contador
  return (
    <div>
      {" "}
      <h1>Número pesado: {numeroPesado}</h1>{" "}
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>{" "}
    </div>
  );
}

✅ useMemo evita recalcular numeroPesado si contador no cambió.

🔹 (Opcional, pero recomendado) useCallback — Memorizar funciones

useCallback es como useMemo pero para funciones: guarda una función para que no se vuelva a crear en cada render.

Ideal si pasás funciones a componentes hijos para evitar renders innecesarios.

📋 Ejemplo:

import { useState, useCallback } from "react";
function App() {
  const [contador, setContador] = useState(0);
  const incrementar = useCallback(() => {
    setContador((prev) => prev + 1);
  }, []); // 👈 no depende de nada
  return (
    <div>
      {" "}
      <p>Contador: {contador}</p>{" "}
      <button onClick={incrementar}>Incrementar</button>{" "}
    </div>
  );
}

✅ incrementar no se vuelve a crear en cada render.

🎯 Resumen rápido: