Las refs en React son un mecanismo que nos permite guardar datos dentro de nuestro código que no se modifican a menos que lo queramos así. En este post, te enseñaremos cómo modificar una ref en React, una forma de controlar y alterar los datos que guardamos en nuestras referencias.
¿Cómo modificar una ref en React?
Este mecanismo nos sirve para guardar valores que no queremos alterar. Es decir, valores que queremos preservar a lo largo de los renders. Sin embargo, puede que haya momentos en los que sí quieras modificar una ref en React. Esto es, una forma de actualizar datos dentro de tu código sin implicar un reinicio de tu aplicación.
Ten presente que, cuando logras modificar una ref en React, no se produce un render. El render solo se produce a través de un cambio de estado, no de ref. En este sentido, no es un reinicio de tu aplicación.
Para modificar una ref en React, basta con llamar al nombre de la variable en la que esta guardada y acceder a su current. Te ponemos un ejemplo. Supongamos que queremos crear una ref para contar el número de renders de un componente. Entonces, crearíamos una ref inicializada a 0:
const rendersRef = useRef (0);
Ahora, podemos hacer que, cada vez que se renderice el componente, se sume 1 y se guarde el nuevo valor en useRef. Para ello, insertamos un useEffect como el siguiente:
useEffect (( ) => {
rendersRef.current = rendersRef.current + 1;
});
Con las líneas de código anteriores, hemos podido modificar una ref en React al hacer que su valor se sume cada vez que se ejecute un useEffect. Para ello, hemos guardado cada cambio en el current de nuestra ref.
Ahora, podemos pintar este dato en pantalla con un console.log (‘render’, rendersRef.current). Este dato cambiará cada vez que haya un cambio de estado y se produzca un nuevo render.
La ventaja de modificar una ref en React es que podemos controlarla con facilidad. Entonces, intentemos hacer que solo se modifique hasta que llegue a 5. Para ello, podemos usar el condicional if:
useEffect (( ) => {
if (rendersRef.current < 5) {
rendersRef.current = rendersRef.current + 1;
}
});
Las líneas de código anteriores harán que rendersRef se modifique cinco veces. Sin embargo, luego harán que se mantenga en 5 para los siguientes render, pues el valor inicial rendersRef.current siempre debe ser menor que cinco. Además, como las referencias guardan valores, este 5 empezará todos los siguientes renders.
De este modo, modificar una ref en React hace que tengamos el control completo sobre un valor que no queremos que implique un nuevo render, pues somos nosotros los que decidimos cuándo cambia este valor.
Ten presente que lo que logramos con useRef no podemos lograrlo con una variable normal. Esto se debe a que, en cada render, React crea una nueva variable con una nueva dirección de memoria y referencia. Esto hace que siempre se inicialice a 0, sin importar que en el render anterior haya modificado el valor. Es decir, no podemos mantener un valor a lo largo de los distintos render a través de una variable. Para ello, necesitamos hacer uso de las refs, que mantienen el último valor que le hemos pasado a su referencia.
¿Qué sigue?
¿Quieres saber qué sigue ahora que sabes cómo modificar una ref en React? ¡Todavía hay mucho que aprender! Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, una formación íntegra e intensiva que mezcla la teoría y la práctica. Allí, aprenderás a desarrollar con lenguajes como JavaScript, HTML y CSS y te convertirás en un experto del desarrollo web en pocos meses. ¡No te lo pierdas y pide más información!
