Intermedioreact
useRef y Manipulación del DOM
Aprende a persistir valores mutables entre renders sin provocar re-renderizados y a acceder a elementos del DOM nativo.
¿Qué es useRef y cómo funciona?
useRef devuelve un objeto mutable con una única propiedad: .current. A diferencia del estado (useState), mutar .current no provoca un re-render del componente. Su valor persiste intacto durante todo el ciclo de vida del componente.jsx
1import { useRef } from 'react';
2
3function ContadorSinRender() {
4 const contadorRef = useRef(0);
5
6 const handleClick = () => {
7 contadorRef.current += 1;
8 console.log("Clics registrados:", contadorRef.current); // No re-renderiza la interfaz
9 };
10
11 return <button onClick={handleClick}>Incrementar sin re-renderizar</button>;
12}Acceso a nodos del DOM
El uso más frecuente de
useRef es interactuar directamente con elementos HTML para enfocar inputs, medir dimensiones o controlar multimedia.jsx
1import { useRef, useEffect } from 'react';
2
3function InputAutofocus() {
4 const inputRef = useRef(null);
5
6 useEffect(() => {
7 // Enfocar automáticamente al montar el componente
8 inputRef.current?.focus();
9 }, []);
10
11 return <input ref={inputRef} placeholder="Escribe aquí tu nombre..." className="input" />;
12}Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (JAVASCRIPT)
Output