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

Nube Colectiva

hace 5 años

En esta página:

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


class App extends React.Component {
    componentDidMount() {
        this.divRef = React.createRef()
    }
    render() {
        return (
            <div>
                <div id="divRefer" ref={this.divRef}>Contenido acá ! </div>
            </div>
        )
    }
}

class App extends React.Component {

componentDidMount() {

this.divRef = React.createRef()

}

render() {

return (

<div>

<div id="divRefer" ref={this.divRef}>Contenido acá ! </div>

</div>

)

}

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.


divRef.current instanceof HTMLDivElement

true

divRef.current instanceof HTMLDivElement

true

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


function App {
    const divRef = React.useRef()
    return (
        <div>
            <div id="divRefer" ref={divRef}>Contenido acá !</div>
        </div>
    )
}

function App {

const divRef = React.useRef()

return (

<div>

<div id="divRefer" ref={divRef}>Contenido acá !</div>

</div>

)

}

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:


function App {
    const divReferencia = React.useRef()
    const valorReferencia = React.useRef(75)
    return (
        <div>
            Value: {valorReferencia.current}
            <div id="divRefer" ref={divReferencia}>Contenido acá !</div>
            <button onClick={()=> valorReferencia.current = 73}>Incr</button>
        </div>
    )
}

function App {

const divReferencia = React.useRef()

const valorReferencia = React.useRef(75)

return (

<div>

Value: {valorReferencia.current}

<div id="divRefer" ref={divReferencia}>Contenido acá !</div>

<button onClick={()=> valorReferencia.current = 73}>Incr</button>

</div>

)

}

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.


function App {
    const divReferencia = React.useRef()
    const <em>valorReferencia</em> = React.useRef(75)
    const [,setDummyState] = useState()
    return (
        <div>
            Value: {<em>valorReferencia</em>.current}
            <div id="divRefer" ref={divReferencia}>Contenido acá !</div>
            <button onClick={()=> (<em>valorReferencia</em>.current = 73, setDummyState({}))}>Iniciar</button>
        </div>
    )
}

function App {

const divReferencia = React.useRef()

const <em>valorReferencia</em> = React.useRef(75)

const [,setDummyState] = useState()

return (

<div>

Value: {<em>valorReferencia</em>.current}

<div id="divRefer" ref={divReferencia}>Contenido acá !</div>

<button onClick={()=> (<em>valorReferencia</em>.current = 73, setDummyState({}))}>Iniciar</button>

</div>

)

}

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)

Las APIs, métodos, funciones, etc. mencionados en este Post, pueden ser modificados, ser eliminados o continuar, esto no depende de mi, si no de los desarrolladores que dan soporte a React JS.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

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