Gancho de useRefreacción

El useRefgancho le permite persistir valores entre renderizados.

Se puede usar para almacenar un valor mutable que no provoca una nueva representación cuando se actualiza.

Se puede utilizar para acceder a un elemento DOM directamente.

No causa re-renderizaciones

Si tratáramos de contar cuántas veces nuestra aplicación se renderiza usando el useStateHook, estaríamos atrapados en un bucle infinito ya que este Hook en sí mismo provoca una nueva renderización.

Para evitar esto, podemos usar el useRefHook.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

useRef()solo devuelve un artículo. Devuelve un Objeto llamado current.

Cuando inicializamos useRefestablecemos el valor inicial: useRef(0).

Ejecute esto en su computadora e intente escribir la entrada para ver cómo aumenta el recuento de procesamiento de la aplicación.

Acceso a elementos DOM

En general, queremos dejar que React maneje toda la manipulación del DOM.

Pero hay algunos casos en los que useRefse puede usar sin causar problemas.

En React, podemos agregar un refatributo a un elemento para acceder a él directamente en el DOM.

import { useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Seguimiento de cambios de estado

El useRefgancho también se puede utilizar para realizar un seguimiento de los valores de estado anteriores.

Esto se debe a que podemos persistir useRefvalores entre renderizados.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Esta vez usamos una combinación de useState, useEffecty useRefpara realizar un seguimiento del estado anterior.

En useEffect, estamos actualizando el useRefvalor actual cada vez inputValueque se actualiza ingresando texto en el campo de entrada.