Hook useRef para trabalhar com refs no React

Nesta lição, vamos trabalhar com refs. Para maior clareza, vamos analisar o funcionamento do hook useRef em comparação com o hook useState.

Vamos criar um componente com um botão:

App.jsxreturn (
  <div>
    <button>
      state click
    </button>
  </div>
);

Vamos importar useState para o componente:

App.jsximport { useState } from 'react';

E vamos criar um estado state:

App.jsxconst [state, setState] = useState(0);

Agora, vamos fazer com que ao clicar no botão, nosso state aumente em 1. Vamos exibir o valor do estado diretamente no texto do botão:

App.jsx<button onClick={handleStateClick}>
  state click: {state}
</button>

Vamos descrever a função para lidar com o clique no botão handleStateClick:

App.jsxfunction handleStateClick() {
  setState(state + 1);
}

Vamos clicar no botão e ver como o valor do estado aumenta.

Agora, vamos criar o componente App, mas usando não o estado, mas uma ref.

Primeiro, vamos importar useRef para o componente:

App.jsximport { useRef } from 'react';

E vamos criar uma ref ref. O resultado do hook useRef retorna um objeto de ref com uma única propriedade current, que é a que nos interessará no futuro. Vamos definir seu valor inicial como 0:

App.jsxconst ref = useRef(0);

Vamos adicionar um manipulador de clique ao botão. Lembre-se de que devemos ler/alterar não a ref em si, mas sua propriedade current:

App.jsx<button onClick={handleRefClick}>
  ref click: {ref.current}
</button>

Vamos adicionar a função para lidar com o clique no nosso botão. Aqui, vamos aumentar current em 1, como no exemplo anterior com o estado. Diferente do estado, que requer a função setState para alterar seu valor, trabalhamos diretamente com a propriedade da ref:

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
}

Agora, vamos clicar no nosso botão. E o que vemos? Ao clicar nele, o valor que era inicialmente 0 não muda.

Você pode começar a duvidar se o valor realmente muda. Vamos verificar isso. Para isso, na função do manipulador de clique, vamos adicionar mais uma linha de código para exibir o valor de current no console:

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
  console.log('ref click: ' + ref.current);
}

Agora, abrindo o console no navegador, vamos clicar no botão novamente e confirmar que o valor realmente muda a cada clique e não há engano.

Agora vemos que, diferentemente do estado, a alteração do valor da ref não causa a re-renderização do componente. Por isso, a cada vez vemos o valor inicial 0 no texto do botão.

Assim, se seus dados são usados para renderização, armazene-os no estado, e se você não precisa de re-renderização, neste caso, o uso de refs pode ser mais eficiente.