Hook useRef para trabajar con refs en React

En esta lección trabajaremos con refs. Para mayor claridad, analicemos el funcionamiento del hook useRef en comparación con el hook useState.

Creemos un componente con un botón:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Importemos useState al componente:

import { useState } from 'react';

Y creemos el estado state:

const [state, setState] = useState(0);

Y ahora hagamos que al hacer clic en el botón nuestro state aumente en 1. Mostraremos el valor del estado directamente en el texto del botón:

<button onClick={handleStateClick}>
	state click: {state}
</button>

Describamos la función para manejar el clic en el botón handleStateClick:

function handleStateClick() {
	setState(state + 1);
}

Hagamos clic en el botón y veamos cómo aumenta el valor del estado.

Y ahora creemos el componente App, pero usando no el estado, sino una ref.

Primero, importemos useRef al componente:

import { useRef } from 'react';

Y creemos la ref ref. El resultado del hook useRef devuelve un objeto de ref con una única propiedad current, que será la que nos interese en el futuro. Establezcamos su valor inicial en 0:

const ref = useRef(0);

Agreguemos un manejador de clic al botón. Recuerda que debemos leer/modificar no la ref en sí, sino su propiedad current:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

Añadamos la función para manejar el clic en nuestro botón. Aquí aumentaremos current en 1, como en el ejemplo anterior con el estado. A diferencia del estado, donde se requiere la función setState para cambiar su valor, con la propiedad de la ref trabajamos directamente:

function handleRefClick() {
	ref.current = ref.current + 1;
}

Ahora hagamos clic en nuestro botón. ¿Y qué vemos? Al hacer clic en él, el valor que inicialmente era 0, no cambia.

Por supuesto, podrías empezar a dudar de que el valor realmente esté cambiando. Comprobémoslo. Para ello, en la función del manejador de clic añadamos una línea más de código para mostrar el valor de current en la consola:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

Y ahora, abriendo la consola en el navegador, hagamos clic en el botón nuevamente y asegurémonos de que el valor realmente cambia con cada clic y no hay ningún engaño.

Ahora vemos que, a diferencia del estado, el cambio del valor de la ref no provoca una rerenderización del componente. Por eso cada vez en el texto del botón vemos el valor inicial 0.

Por lo tanto, si tus datos se utilizan para el renderizado, guárdalos en el estado, y si no necesitas el renderizado, en ese caso, el uso de refs puede ser más eficiente.

Supongamos que en tu componente hay un párrafo con el texto 'text' y un botón. Haz que cada vez que se haga clic en el botón se añada un signo de exclamación al final del texto del párrafo. Hazlo usando el estado.

Crea un componente App, pero en lugar del estado ahora usa una ref. Asegúrate de que al presionar el botón el texto del párrafo no cambie. Añade también la salida del texto del párrafo a la consola, ábrela y asegúrate de que en realidad el texto sí cambia.