Olá pessoas, bora continuar nossa séria sobre os hooks do nosso querido ReactJS, e hoje, vamos mergulhar no maravilhoso mundo do useRef hook no ReactJS. É como ter um superpoder que permite gerenciar valores mutáveis em seus componentes. Então, se prepare e prepare-se para elevar o seu jogo no React!
Caso queriam ver os outros artigos sobre essa série, segue links de artigos anteriores e nosso github:
- Série React Hooks: useImperativeHandle
- Série React Hooks: useDeferredValue
- Série React Hooks: useCallback
- Série React Hooks: useSyncExternalStore
- Série React Hooks: useMemo
Afinal, o que é o Hook useRef? 🤔
O useRef
é um gancho (ou hook) que permite que você acesse e manipule diretamente elementos do DOM em seus componentes. Parece interessante? Então continue lendo, pois vamos mergulhar nesse conceito de forma descontraída e profissional. Ele é como uma ferramenta mágica que ajuda você a armazenar e acessar valores mutáveis em componentes funcionais. É como ter um bilhete adesivo que lembra as coisas para você, mas muito mais poderoso!
Quando usar o useRef?
Você pode estar se perguntando: "Quando devo usar o hook useRef?". Bem, meu pequeno gafanhoto, aqui estão algumas situações em que ele é útil:
Referenciando elementos do DOM: Quando você precisa pegar um elemento do DOM, o useRef está lá para te ajudar. Ele permite que você acesse e manipule esse elemento como um verdadeiro mestre. Diga adeus ao antigo document.getElementById()!
Gerenciando valores persistentes: Às vezes, você deseja que um valor persista entre as renderizações sem desencadear uma renderização em si. É aí que o useRef brilha. Ele mantém o valor e você pode acessá-lo sempre que precisar, sem interferir no ciclo de renderização do seu componente.
Exemplos de código para te ajudar!
Agora, vamos colocar a mão na massa com alguns exemplos de código. Mas espere! Vamos incrementar as coisas com TypeScript, para que você tenha o melhor dos dois mundos: segurança de tipos e a magia do useRef.
Exemplo 1: Referenciando um Elemento Textarea
import React, { useRef, useEffect } from 'react';
export const AutosizeTextarea = () => {
const textareaRefElement = useRef<HTMLTextAreaElement>(null);
useEffect(() => {
if (textareaRefElement.current) {
textareaRefElement.current.style.height = 'auto';
textareaRefElement.current.style.height = `${textareaRefElement.current.scrollHeight}px`;
}
}, []);
const handleChange = () => {
if (textareaRefElement.current) {
textareaRefElement.current.style.height = 'auto';
textareaRefElement.current.style.height = `${textareaRefElement.current.scrollHeight}px`;
}
};
return <textarea ref={textareaRefElement} onChange={handleChange} />;
};
Neste exemplo, utilizamos o useRef
para criar uma referência ao elemento textarea
. O useEffect
é usado para ajustar automaticamente a altura do textarea
quando o componente é montado. Definimos a altura inicial como 'auto' e, em seguida, atualizamos para o valor de scrollHeight
do textarea
, ajustando a altura com base no conteúdo. A função handleChange
é acionada sempre que o valor do textarea
é alterado, recalculando a altura para acomodar o novo conteúdo.
Exemplo 2: Foco no Carregamento
import React, { useRef, useEffect } from 'react';
export const AutoFocusInput = () => {
const inputRefElement = useRef<HTMLInputElement>(null);
useEffect(() => {
if (inputRefElement.current) {
inputRefElement.current.focus();
}
}, []);
return <input ref={inputRefElement} type="text" />;
};
Neste exemplo, usamos o useRef
para criar uma referência ao elemento de input. O useEffect
é usado para dar foco ao input quando o componente é montado. Se inputRefElement.current
não for nulo, ou seja, se o elemento de input existir no DOM, chamamos o método focus()
para trazer o foco para o campo de input. Isso permite que o input seja focado automaticamente assim que o componente for renderizado.
Exemplo 3 e ultimo: Acompanhamento do Redimensionamento da Janela
import React, { useState, useRef, useEffect } from 'react';
export const WindowResizeTracker = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
const handleResize = () => {
if (resizeTimeoutRef.current) {
clearTimeout(resizeTimeoutRef.current);
}
resizeTimeoutRef.current = setTimeout(() => {
setWindowWidth(window.innerWidth);
setWindowHeight(window.innerHeight);
}, 300);
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
if (resizeTimeoutRef.current) {
clearTimeout(resizeTimeoutRef.current);
}
};
}, []);
return (
<div>
<p>Width: {windowWidth}px</p>
<p>Height: {windowHeight}px</p>
</div>
);
};
este exemplo, além de rastrear o redimensionamento da janela, exibimos as dimensões da janela na tela. Criamos dois estados: windowWidth
e windowHeight
, que armazenam a largura e a altura da janela, respectivamente. Dentro da função handleResize
, atualizamos esses estados quando ocorre o redimensionamento da janela.
Na parte de renderização, exibimos as dimensões da janela usando
. Assim, sempre que a janela for redimensionada, as dimensões serão atualizadas e exibidas na tela.
Esses exemplos demonstram casos adicionais de uso do useRef no TypeScript. Seja ajustando a altura de um textarea automaticamente, acompanhando o redimensionamento da janela ou dando foco a um input no carregamento, o useRef fornece um mecanismo poderoso para lidar com valores mutáveis e acessar elementos do DOM em componentes React.
Conclusão
Em resumo, o useRef é uma ferramenta poderosa no ReactJS que permite a manipulação direta de elementos do DOM em seus componentes. Use-o quando precisar interagir diretamente com o DOM, como focar um campo de entrada ou obter valores de um elemento. No entanto, se você estiver lidando apenas com o estado interno do componente ou atualizações do ciclo de vida, o useRef pode não ser necessário.
Espero que este artigo descontraído e profissional tenha ajudado você a entender melhor o uso do useRef no ReactJS. Agora você está pronto para explorar e utilizar esse gancho incrível em seus projetos. Divirta-se codificando!
Top comments (0)