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

--

--

--

Full Stack JS Engineer — Developero founder — Software Development Ebooks author. https://developero.io

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juan Correa

Juan Correa

Full Stack JS Engineer — Developero founder — Software Development Ebooks author. https://developero.io

More from Medium

Solved — [PrivateRoute] is not a <Route> component.

Redux Toolkit

[React] Event Capturing and Event Bubbling

Private Routes With React Js — React -Router V6