Cómo usar Refs en React
¿Qué son las Refs en React?
Las Refs (abreviatura de "references") permiten acceder a un elemento DOM o a un componente React de manera directa, sin tener que pasar por el flujo de datos regular de React. Las Refs son útiles para interactuar con elementos que necesitan ser manipulados imperativamente, como formularios, inputs, o componentes externos que no pueden gestionarse mediante el flujo estándar de estado y props.
Para crear una referencia, se utiliza el hook useRef en componentes funcionales o React.createRef() en componentes de clase. La referencia creada puede luego asignarse a un elemento y usarse para manipular su estado.
Ejemplos de uso de Refs en React
1. Acceder a un Input para gestionarlo
import React, { useRef } from 'react';
function TextInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focalizar Input</button>
</div>
);
}
En este ejemplo, se usa useRef para focalizar el input cuando se hace clic en el botón.
2. Reproducción de video
import React, { useRef } from 'react';
function VideoPlayer() {
const videoRef = useRef(null);
const playVideo = () => {
videoRef.current.play();
};
return (
<div>
<video ref={videoRef} width="320" height="240">
<source src="video.mp4" type="video/mp4" />
</video>
<button onClick={playVideo}>Reproducir</button>
</div>
);
}
Este ejemplo muestra cómo utilizar Refs para controlar la reproducción de un video.
3. Almacenar valores sin provocar renderizado
import React, { useRef, useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
const increment = () => {
countRef.current += 1;
setCount(countRef.current);
};
return (
<div>
<p>Valor del contador: {count}</p>
<button onClick={increment}>Incrementar</button>
</div>
);
}
Aquí se muestra cómo usar Refs para almacenar un valor sin que se vuelva a renderizar el componente cada vez que el valor cambia.
Referencia oficial
Para más detalles sobre Refs en React, visita la documentación oficial de React.
Jorge García
Fullstack developer