Série React Hooks: useRef

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:

github

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!

Blog