8.2-Tutorial de useRef en React

Tutorial de useRef en React: Guía Práctica para Principiantes

(Perfecto para tu blog!)

¿Quieres manejar el DOM directamente en React sin provocar re-renders innecesarios? useRef es tu solución. En este tutorial, aprenderás qué es, cómo usarlo y casos prácticos comunes.

---

🔹 ¿Qué es useRef?

useRef es un hook de React que te permite:

1. Acceder a elementos del DOM directamente (como document.getElementById en vanilla JS).

2. Almacenar valores mutables que persisten entre renders sin causar re-renders (a diferencia de useState).

---

🛠️ Sintaxis Básica

jsx

import { useRef } from 'react';

function Componente() {
  const ref = useRef(valorInicial); // Valor inicial: null, 0, "", etc.

  // Acceder al valor actual con:
  console.log(ref.current);

  return <div ref={ref}>¡Hola!</div>;
}

---

🚀 3 Casos de Uso Prácticos

1. Enfocar un Input Automáticamente

jsx

import { useRef, useEffect } from 'react';

function AutoFocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // Enfoca el input al cargar
  }, []);

  return <input ref={inputRef} placeholder="Escribe aquí..." />;
}

¿Por qué usar useRef aquí?

• Porque necesitamos interactuar con el DOM (el input) sin manejar estado.

---

2. Contador sin Re-render (Valor Mutable)

jsx

import { useRef } from 'react';

function Contador() {
  const countRef = useRef(0); // No causa re-render al cambiar

  const incrementar = () => {
    countRef.current += 1;
    console.log("Valor actual:", countRef.current); // Pero no se ve en la UI
  };

  return (
    <div>
      <button onClick={incrementar}>Incrementar (ver consola)</button>
    </div>
  );
}

¿Cuándo es útil?

• Para almacenar valores que no necesitan mostrarse en la UI (ej: IDs de timers, contadores internos).

---

3. Medir el Tamaño de un Elemento

jsx

import { useRef, useEffect } from 'react';

function MedirElemento() {
  const divRef = useRef(null);

  useEffect(() => {
    if (divRef.current) {
      const width = divRef.current.offsetWidth;
      console.log("Ancho del elemento:", width);
    }
  }, []);

  return <div ref={divRef}>Este div tiene un ancho medible</div>;
}

Uso típico:

• Animaciones, responsive design, o integración con librerías gráficas (D3.js, Three.js).

---

⚠️ ¿useRef vs useState?

useRef	useState
No causa re-render al cambiar	Causa re-render
Valor accesible en .current	Valor accesible directamente
Ideal para DOM y valores mutables	Ideal para estado de la UI

Ejemplo:

jsx

// ❌ No uses useRef si necesitas que la UI se actualice:
const [count, setCount] = useState(0); // ✅ Correcto para contador visible

---

🔎 Consejos Avanzados

1. No abuses de useRef: Si necesitas reactividad, usa useState o useReducer.

2. Inicializa con null: Siempre que trabajes con el DOM, inicia con useRef(null).

3. Usa useEffect para sincronizar: Accede a ref.current dentro de useEffect para evitar errores.

---

📌 Conclusión

useRef es una herramienta poderosa para:
✔ Manipular el DOM directamente.
✔ Almacenar valores sin re-renders.
✔ Integrar librerías externas.

¿Te gustó? ¡Comparte este tutorial en tu blog y ayuda a más desarrolladores a dominar React! 🚀