Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Diferencia entre React.useRef y React.create en React JS

En algunas ocasiones podemos encontrar que algunas APIs parecen hacer el mismo trabajo o que son similares, pero es una mala idea afirmar esto, no tiene sentido que un Framework o determinada herramientas añada 2 APIs que hagan la misma tarea, este es el caso de React JS con las APIs React.useRef y React.create y en este Post te mostraré cual es la diferencia entre ambas.

Ambas APIs React.useRef y React.create se usan para crear un objeto mutable y las propiedades de un objeto mutable se pueden cambiar a voluntad sin afectar el estado de un componente.

El objeto mutable tiene una propiedad llamada current, en esta propiedad se almacena y se hace referencia al valor correspondiente.

Las APIs React.useRef y React.create crean estos objetos mutables a los que se puede denominar como refs y estas tienen una referencia a cualquier valor que le especifiquemos.

Veamos a continuación la diferencia entre ambas APIs.

La API React.createRef

Esta API se utiliza en componentes de clase para crear referencias, por ejemplo a continuación tengo un componente de clase llamado App


Puedes ver que se crea una referencia en divRef y esta referencia la asignamos como un valor al atributo ref en el div id=”divRefer”.

Esto crea una instancia DOM del div id=”divRefer” que es asignado por divRef. Se puede hacer referencia a la instancia DOM desde la propiedad current en divRef.

La API React.useRef

Esta API se usa en los componentes de una función, por ejemplo a continuación tengo una función llamada App


El efecto es el mismo que en el ejemplo anterior en el componente de clase llamado igualmente App, useRef crea una referencia en divRef y haciendo uso del atributo ref en div id=”divRefer” asignaremos la instancia DOM de div id=”divRefer” a divRef. Para obtener la instancia DOM de divRef, hacemos referencia a su propiedad actual.

Ambas APIs React.useRef y React.create

Las APIs React.useRef y React.create se pueden usar para almacenar cualquier valor, no solo instancias DOM a través del atributo ref, veamos el siguiente código:


En el código anterior valorReferencia tiene el valor 75 en su propiedad actual. Mostramos el valor de valorReferencia en el método de representación haciendo referencia en las llaves JSX. Cuando el componente se procesa veremos el valor 75.

El cambiar los valores de las referencias no hará que se vuelva a renderizar el componente. A continuación puedes ver el botón Iniciar, que cuando se hace clic en él, cambiará el valor de valorReferencia a 73, esto no volverá a renderizar el componente.

Entonces todavía tenemos el valor 75 (el antiguo valor de valorReferencia) en el DOM, esto significa que debemos activar el renderizado en el componente para ver el valor actual de valorReferencia.


En el código anterior, creamos un estado ficticio y una función setDummyState para activar el renderizado del componente y si hacemos clic en el botón Iniciar, se volverá a renderizar el componente con el valor actualizado de valorReferencia en el DOM.

Conclusión

En este Post, puedes ver como funciona cada API, es importante tener en claro sus funcionamientos para no confundirnos y saber cuando usarlas en un proyecto con React JS.

Al parecer ambas APIs parecen hacer lo mismo, pero siempre debemos tener claro que solo podemos usar la API createRef en componentes de clase y la API useRef en componentes de una función.

Nota(s)

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil