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:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Vamos importar useState para o componente:

import { useState } from 'react';

E vamos criar um estado state:

const [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:

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

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

function 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:

import { 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:

const 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:

<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:

function 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:

function 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.

Suponha que no seu componente haja um parágrafo com o texto 'text' e um botão. Faça com que a cada clique no botão um ponto de exclamação seja adicionado ao final do texto do parágrafo. Faça isso usando o estado.

Crie um componente App, mas em vez do estado agora use uma ref. Certifique-se de que quando o botão for pressionado, o texto do parágrafo não mudará. Adicione também a saída do texto do parágrafo no console, abra-o e certifique-se de que o texto realmente muda.