Gancho de useRefreação

O useRefHook permite que você persista valores entre renderizações.

Ele pode ser usado para armazenar um valor mutável que não causa uma nova renderização quando atualizado.

Ele pode ser usado para acessar diretamente um elemento DOM.

Não causa re-renderizações

Se tentássemos contar quantas vezes nosso aplicativo renderiza usando o useStateHook, seríamos pegos em um loop infinito, pois esse próprio Hook causa uma nova renderização.

Para evitar isso, podemos usar o 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()retorna apenas um item. Ele retorna um Object chamado current.

Quando inicializamos useRef, definimos o valor inicial: useRef(0).

Execute isso no seu computador e tente digitar a entrada para ver o aumento da contagem de renderização do aplicativo.

Acessando elementos DOM

Em geral, queremos deixar o React lidar com todas as manipulações do DOM.

Mas há alguns casos em que useRefpode ser usado sem causar problemas.

No React, podemos adicionar um refatributo a um elemento para acessá-lo diretamente no 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'));

Acompanhamento de alterações de estado

O useRefGancho também pode ser usado para rastrear valores de estado anteriores.

Isso ocorre porque somos capazes de persistir useRefvalores entre renderizações.

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'));

Desta vez, usamos uma combinação de useState, useEffecte useRefpara acompanhar o estado anterior.

No useEffect, estamos atualizando o useRefvalor atual cada vez que o inputValueé atualizado inserindo texto no campo de entrada.