Diferencia entre useRef y createRef en ReactJS

¿Qué es un ref?
Una referencia se define como cualquier valor que no activa una nueva representación del componente cuando se modifica. Este comportamiento es contrario a la función de los estados y accesorios. Una referencia se puede crear de dos maneras: mediante el gancho useRef o mediante la función createRef.

useRef: useRef es un gancho que usa la misma referencia en todo momento. Guarda su valor entre renderizaciones en un componente funcional y no crea una nueva instancia de la referencia para cada renderización. Persiste la referencia existente entre re-renderizaciones.

createRef: createRef es una función que crea una nueva referencia cada vez. A diferencia de useRef, no guarda su valor entre renderizaciones, sino que crea una nueva instancia de ref para cada renderización. Por lo tanto, lo que implica que no persiste la referencia existente entre re-renderizaciones.

Veamos un ejemplo para entender las diferencias más claramente.  

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app react-ref

• Paso 2: después de crear la carpeta de su proyecto, es decir, reaccionar-ref, muévase a ella con el siguiente comando:

  cd react-ref

Estructura del proyecto:

Ejemplo 1: en este ejemplo, crearemos una referencia usando useRef . En este caso, notaremos que para cada renderizado nuestro ref persiste y, por lo tanto, vemos que se repite el mensaje que configuramos dentro del useEffect. Ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { useEffect, useRef, useState } from "react";
import "./App.css";
  
export default function App() {
  const [counter, setCounter] = useState(0);
  const ref = useRef();
  
  useEffect(() => {
    ref.current = "GeeksforGeeeks";
  }, []);
  
  useEffect(
    () => {
      console.log(counter, ref.current);
    },
    [counter]
  );
  
  return (
    <div className="App">
      <header className="App-header">
        <h3>Example on useRef</h3>
        <button onClick={() => setCounter((c) => c + 1)}>
          Increment
        </button>
        <h5>Counter Value: {counter}</h5>{" "}
      </header>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: dado que createRef conserva el valor de referencia en las nuevas renderizaciones, podemos ver el valor ref.current en cada nueva renderización.

Ejemplo 2: en este ejemplo, crearemos una referencia usando createRef . En este caso, notaremos que se crea una nueva instancia de ref después de cada renderizado, por lo que perdemos nuestro mensaje (GeeksforGeeks) después de la visualización inicial. Ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { useEffect, createRef, useState } from "react";
import "./App.css";
  
export default function App() {
  const [counter, setCounter] = useState(0);
  const ref = createRef();
  
  useEffect(() => {
    ref.current = "GeeksforGeeeks";
  }, []);
  
  useEffect(
    () => {
      console.log(counter, ref.current);
    },
    [counter]
  );
  
  return (
    <div className="App">
      <header className="App-header">
        <h3>Example on createRef</h3>
        <button onClick={() => setCounter((c) => c + 1)}>
          Increment
        </button>
        <h5>Counter Value: {counter}</h5>{" "}
      </header>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: Dado que createRef no persiste el valor de referencia en los renderizados, podemos ver el valor actual de referencia solo una vez.

Diferencia entre useRef y CreateRef: