Introdução
Com o advento dos Hooks a partir da versão 16.8 do React, é possível escrever componentes funcionais e gerenciar o ciclo de vida do próprio componente.
A própria biblioteca do react disponibiliza diversos hooks que irão facilitar a sua vida na hora de programar. Nesse artigo vamos estudar um desses hooks, o useRef.
Pra que serve o useRef?
useRef é um Hook que pode ser usado basicamente de três maneiras:
- permitir o acesso ao elemento DOM;
- rastrear mudanças de estado;
- evitar re-renderizações de componentes;
Segue abaixo alguns exemplos simples para o uso desse hook na prática:
Exemplo 01: Acesso ao elemento DOM
Normalmente nós deixamos o próprio React manipular os elementos DOM, mas em alguns casos, podemos utilizar o useRef para acessá-los, sem causar nenhum problema de desempenho.
Ao clicar nos botões, temos acesso às propriedades do elemento input.
Exemplo 02: Mudanças de estado
O hook useRef também pode ser utilizado para rastrear mudanças de estado. Isso ocorre porque o useRef persiste o valor do estado entre as renderizações.
Ao clicar nos botões, podemos monitorar as mudanças de estado da variável count.
Exemplo 03: Re-renderizações de componentes
Em alguns cenários, precisamos rastrear um estado utilizando o useEffect e, dependendo de como o fizermos, poderá causar um looping infinito ou renderizações desnecessárias.
Utilizando o useRef, podemos evitar esse problema.
Ao digitar nos inputs, podemos ver a diferênça no número de renderizações do código.
Conclusão
Neste artigo abordamos a utilização do hook useRef em alguns exemplos práticos. O useRef retorna um objeto mutável que possui a propriedade .current, assumindo qualquer valor, seja um elemento DOM ou do React.
Quer praticar? Segue o link do código fonte utilizado nesse projeto.
Top comments (0)