Hook para trabajar con referencias useRef

React Hooks 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 currentque 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?

claps for useReducer

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 ⚡️🤘.

Posts relacionados a la serie de React Hooks Manual Desde Cero:

• Introducción a los React Hooks.
• Hook de estado useState.
• Hook de efectos useEffect.
• Hook para memorizar funciones useCallback.
• Hook para optimizar performance useMemo.
• Hook para estados complejos useReducer.
• Hook para manejar la api de Context useContext.
• Hook para usar referencias useRef (actual).