Hook para trabajar con referencias useRef
El hook useRef
nos permite trabajar con referencias en componentes funcionales.
const refContainer = useRef(initialValue);
Este hook nos retorna un objeto con una propiedad current
que es mutable y cuyo valor persiste durante los renderizados y ciclo de vida del componente.
Un caso de uso es usar referencias al DOM o a componentes de React.
Por ejemplo, cuando queremos hacer que un input tenga un auto focus al montarse.
Primero vamos a hacer el ejemplo con un componente de tipo clase y posteriormente la versión con useRef
.
1 class MyForm extends Component {
2 inputEl = null;
3
4 componentDidMount() {
5 this.inputEl.focus();
6 }
7
8 render() {
9 return (
10 <p>
11 Name:
12 <input
13 type="text"
14 ref={(el) => (this.inputEl = el)}
15 />
16 </p>
17 );
18 }
19 }
Usando useRef
queda del siguiente modo:
1 const Form = () => {
2 const inputEl = useRef(null);
3
4 useEffect(() => inputEl.current.focus(), []);
5
6 return (
7 <p>
8 Name:
9 <input type="text" ref={inputEl} />
10 </p>
11 );
12 };
Emular variables de instancia en componente funcional (this)
Dentro de un componente de tipo clase podemos crear variables de instancia como el siguiente ejemplo:
1 class MyComponent extends React.Component {
2 intervalId = null;
3
4 componentDidMount() {
5 // Accedemos con "this"
6 this.intervalId = setInterval(() => {
7 // ...
8 });
9 }
10
11 componentWillUnmount() {
12 clearInterval(this.intervalId);
13 }
14
15 render () {
16 // code
17 }
18 }
El hook useRef
también nos sirve para tener referencias a cualquier valor.
De este modo, podemos emular variables de instancia:
1 function Timer() {
2 const intervalRef = useRef();
3
4 useEffect(() => {
5 const id = setInterval(() => {
6 // ...
7 });
8 intervalRef.current = id;
9 return () => {
10 clearInterval(intervalRef.current);
11 };
12 });
13
14 // ...
15 }
Otra característica importante de ref es que si su valor cambia, no causa un re render.
Quiere decir que si cambia el valor de intervalRef
, no causará un re render.
Descarga Ebook React Hooks Manual desde cero gratis
Este post es un extracto del ebook publicado en Amazon: React Hooks Manual Desde Cero. Lo puedes descargar GRATIS a través de mi sitio web 🤓.
Recapitulación del hook useRef
Este ha sido un capítulo corto debido a la sencillez de este hook. Lo que vimos fue:
- Cómo usar ref en un componente de tipo clase.
- Cómo usar ref en un componente de tipo función usando
useRef
para elementos de la UI. - Cómo usar
useRef
para crear valores que se comporten parecido a como funciona una variable de instancia de una clase.
¿Te ha gustado el contenido?
Te invito a darle clap (1, 10, 50, los que quieras!)👏 y compartirlo! Puedes subscribirte a mi canal de YouTube y al blog de Developero para más contenidos de este tipo ⚡️🤘.