¿Sabes qué son y cómo funcionan las referencias en React? El mundo de la programación es más que líneas de código. La realidad es que un buen programador debe entender la lógica detrás del código que está escribiendo, y parte de esa lógica es el equipo en el que trabaja. En este post, te explicaremos qué son y cómo funcionan las referencias en React, un concepto fundamental para entender la programación web.
¿Qué son las referencias en React?
Cuando hablamos de referencias en React nos referimos a un concepto fundamental de esta librería y de JavaScript. Este concepto se usa para definir el funcionamiento de las refs, un mecanismo que puedes conocer en nuestro post sobre refs y el DOM en React. En este espacio, el uso de useRef nos permite renderizar una y otra vez el mismo objeto exactamente. Es decir, la misma referencia.
El concepto de referencias en React es muy similar al de JavaScript. En nuestro post sobre los arrays de JavaScript y la memoria RAM, te explicamos que todo lo que guardamos en nuestro código tiene un espacio dentro de la memoria RAM de nuestro equipo. Entonces, cada objeto tiene una dirección de memoria o slot. A esta dirección la llamamos referencia, pues puede tomarse por más de un objeto para crear el mismo resultado. Es decir, cuando dos objetos son iguales es porque están apuntando a la misma referencia.
¿Cómo funcionan las referencias en React?
Para explicarte cómo funcionan las referencias en React usaremos algunos ejemplos. Supongamos que escribimos lo siguiente:
{ } === { }
¿Qué esperamos cómo respuesta? Tal vez un true, pues { } es lo mismo que { }. Sin embargo, lo que obtenemos es un false. Esto sucede porque, cada vez que JavaScript abre y cierra llaves, está creando un objeto. Como ya te hemos explicado, este objeto se guarda en una dirección de memoria (referencia). Luego, cuando JavaScript vuelve a abrir y cerrar llaves está creando otro objeto, con una dirección de memoria o referencia nueva.
Entonces, aunque los dos objetos parezcan iguales, tienen referencias en React diferentes. Esto afecta a nuestro resultado porque, cuando JavaScript compara objetos, no está comparando los valores ni las claves, sino las referencias.
Ten presente que esto sucederá sin importar el contenido que tengas dentro. Es decir, verás algo como lo siguiente:
{a:1} === {a:1}
> false
Entonces, los elementos anteriores son iguales en cuanto a valor, pero distintos en cuanto a objetos. Esto sería como tener dos billetes de 100 euros, aunque tienen el mismo valor no son el mismo objeto.
Ten en cuenta que esto solo sucede cuando estamos comparando objetos o funciones, no sucederá cuando compares valores de tipo number.
¿Qué sigue?
Ahora que sabes qué son las referencias en React, ¡te invitamos a usarlas en tus propios proyectos! Para seguir aprendiendo a desarrollar todo tipo de proyectos de programación para la web, no solo en React, sino también en lenguajes como HTML, CSS y JavaScript, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. ¡Anímate a pedir más información y da el paso que te cambiará la vida!
