No React, os hooks são funções especiais que permitem aos desenvolvedores usar o estado e outros recursos do React sem a necessidade de componentes de classe. Entre esses hooks, o hook useRef se destaca como uma ferramenta valiosa para gerenciar valores e acessar elementos do DOM (Document Object Model).
O hook useRef é uma ferramenta poderosa que oferece imensa flexibilidade e recursos, mas os desenvolvedores geralmente não o entendem e o utilizam de forma incorreta.
Neste artigo, vamos explorar sobre o hook useRef, desmistificando sua finalidade, funcionalidade e práticas recomendadas. Ao final deste guia, você entenderá do que se trata o Hook e obterá insights valiosos sobre como aproveitar todo o seu potencial de forma eficaz.
O que é hook useRef?
O hook useRef tem duas finalidades principais: armazenar valores mutáveis que não causam uma nova renderização quando atualizados e armazenar referências a elementos do DOM. Vamos explorar como ele funciona em mais detalhes.
Quando um componente é renderizado no React, seu estado e outras variáveis são normalmente redefinidos. No entanto, há casos em que você precisa manter determinados valores mesmo quando o componente é renderizado novamente. É aqui que o hook useRef entra em ação. Ele permite que você crie uma referência para um valor que persistirá entre as renderizações, garantindo que o valor permaneça intacto mesmo que outras partes do componente sejam alteradas.
Além disso, o hook useRef é fundamental para que você trabalhe com elementos DOM. No React, acessar e modificar elementos DOM diretamente pode ser um desafio, especialmente sem o hook useRef. Com useRef, você pode obter uma referência a um elemento DOM específico e executar operações nele. Isso elimina a necessidade de bibliotecas externas ou soluções alternativas complicadas.
Implementando o useRef no React
Para começar a usar o hook useRef em seu projeto React, importe do pacote React:
import { useRef } from 'react';Depois de importado, você pode declarar uma variável ref em seu componente funcional usando o hook useRef:
const myRef = useRef();Agora, você tem um objeto ref, myRef, que pode ser usado para armazenar e acessar valores. Para usar a variável myRef com qualquer elemento, atribua à propriedade ref do elemento.
<div ref={myRef}>This is an example element</div>No exemplo acima, você atribui ao elemento div uma propriedade ref. Isso permite que você faça referência e acesse o elemento usando a variável myRef em outra parte do componente.
Para acessar o valor armazenado na referência criada, você pode usar a propriedade .current do objeto myRef.
const myRefValue = myRef.current;
console.log(myRefValue); // <div>This is a sample div</div>Manipulação do DOM com o hook useRef
A manipulação do DOM é uma tarefa comum no desenvolvimento da web, pois permite que você altere e atualize dinamicamente o conteúdo, a estrutura e a aparência de uma página da web.
No desenvolvimento tradicional em JavaScript, para acessar e manipular os elementos do DOM, você precisa usar métodos como getElementById, querySelector ou getElementsByClassName para selecionar elementos específicos do documento. Uma vez selecionados, você pode atualizar o conteúdo, modificar estilos ou anexar ouvintes de eventos.
// HTML
<div>
<input type="text" id="myInput" />
<button id="focusButton">Focus Input</button>
</div>
// JavaScript
<script>
const inputRef = document.getElementById('myInput');
const focusButton = document.getElementById('focusButton');
const handleFocus = function() {
inputRef.focus();
};
focusButton.addEventListener('click', handleFocus);
</script>No entanto, ao trabalhar com elementos do DOM em um componente React, o processo não é o mesmo devido ao DOM virtual do componente e à necessidade de gerenciar as atualizações de forma eficiente. Os desenvolvedores geralmente recorrem a várias abordagens, como o uso de refs ou bibliotecas externas como jQuery, para acessar e manipular elementos DOM.
Com a introdução do hook useRef no React, o processo de trabalhar com elementos DOM dentro de componentes foi significativamente simplificado. O hook useRef oferece uma maneira direta de criar uma referência a um elemento DOM, tornando facilmente acessível e manipulável no contexto do componente.
import { useRef } from 'react';
const FocusComponent = () => {
const inputRef = useRef(null);
const handleFocus = () => {
// accessing the input element
let inputElement = inputRef.current;
// modify the DOM element
inputElement.focus();
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleFocus}>Focus Input</button>
</div>
);
}Neste exemplo, o hook useRef é usado para criar uma referência inputRef que aponta para o elemento input. Quando o botão “Focus Input” é clicado, a função handleFocus utiliza inputRef.current.focus() para definir o foco diretamente no elemento de entrada. Isso demonstra como o hook useRef simplifica o processo de trabalho com elementos DOM no React.
Outro exemplo é quando você deseja manipular um div alterando seu plano de fundo quando um botão é clicado:
import { useRef } from 'react';
const ExampleComponent = () => {
const divRef = useRef();
const handleClick = () => {
divRef.current.style.backgroundColor = 'red';
};
return (
<div>
<div ref={divRef}>This is a sample div</div>
<button onClick={handleClick}>Change Color</button>
</div>
);
}Nesse exemplo, você cria uma referência com o hook useRef chamado divRef. Você atribui essa referência à propriedade ref do elemento div.
Quando o botão “Change Color” é clicado, a função handleClick é chamada. Na função, você pode acessar o elemento div com divRef.current. Nesse caso, você modifica a cor de fundo do elemento div atualizando sua propriedade style.backgroundColor para ‘red’.
divRef.current.style.backgroundColor = 'red';Preservação de valores em novas renderizações
A preservação de valores em novas renderizações é um caso de uso poderoso do hook useRef. Ele é particularmente útil quando você tem valores que precisam persistir durante todo o ciclo de vida do componente sem acionar uma nova renderização.
Para que você entenda melhor esse conceito, vamos comparar o hook useRef com o hook useState usando exemplos reais:
Exemplo com o Hook useState:
import { useState } from 'react';
function CounterComponent() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}Neste exemplo, você usa o hook useState para gerenciar a variável de estado count. Sempre que a função increment é chamada, o estado count é atualizado usando setCount. Isso aciona uma nova renderização do componente, refletindo o valor atualizado de count.
Exemplo com o Hook useRef:
import React, { useRef } from 'react';
function CounterComponent() {
const countRef = useRef(0);
const increment = () => {
countRef.current = countRef.current + 1;
console.log('Count:', countRef.current);
};
return (
<div>
<p>Count: {countRef.current}</p>
<button onClick={increment}>Increment</button>
</div>
);
}Neste exemplo, você usa o hook useRef para criar uma variável countRef, inicializada com um valor inicial de 0. Sempre que a função increment é chamada, você atualiza diretamente o valor countRef.current sem acionar uma nova renderização. O valor atualizado é registrado no console.
Ao usar o hook useRef, o componente não é renderizado novamente quando o valor countRef.current é alterado. Isso pode ser vantajoso em cenários em que você tem valores que precisam ser modificados, mas que não afetam o processo de renderização.
Observe que, quando você usa o hook useRef dessa maneira, as alterações no valor ref não acionam automaticamente as novas renderizações. Se precisar refletir o valor atualizado na interface do usuário, você poderá tratar a atualização manualmente ou combinar o hook useRef, com outros hooks ou variáveis de estado para obter o comportamento desejado.
Resumo
Neste artigo, você explorou o hook useRef no React, compreendendo sua finalidade, implantação e aplicativos práticos. Você aprendeu a usar o useRef para acessar e modificar elementos do DOM e preservar valores.
Uma prática recomendada para usar o hook useRef é evitar que você o use em excesso. Use quando você precisar especificamente acessar e manipular elementos do DOM ou preservar valores em novas renderizações.
O hook useRef também pode ser usado em vários cenários práticos, como animações e transições, valores de cache ou resultados intermediários e muito mais, o que faz com que seu aplicativo React se destaque.
Crie seu próximo aplicativo React e implemente gratuitamente na hospedagem de aplicativos da Kinsta para que você possa acessá-lo em tempo real e compartilhar ao mundo!
Agora é a sua vez. O que você pensa sobre o hook useRef? Fique à vontade para compartilhar conosco na seção de comentários abaixo.
