Referencias en React

Autor: | Última modificación: 3 de octubre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!