Série React Hooks: useRef
Tags: javascript, react, useref
Published: 2023-08-07 13:27:09


![useRef](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bq30xwpmpre3pdznnmr4.png)

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](https://github.com/taisesoares/hooks-reactjs)

- [Série React Hooks: useImperativeHandle](https://dev.to/taisesoares/serie-react-hooks-useimperativehandle-44d)
- [Série React Hooks: useDeferredValue](https://dev.to/taisesoares/serie-react-hooks-usedeferredvalue-13d)
- [Série React Hooks: useCallback](https://dev.to/taisesoares/serie-react-hooks-usecallback-49ap)
- [Série React Hooks: useSyncExternalStore](https://dev.to/taisesoares/serie-react-hooks-usesyncexternalstore-2lpk)
- [Série React Hooks: useMemo](https://dev.to/taisesoares/serie-react-hooks-usememo-5pc)


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

```typescript
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

```typescript
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

```typescript
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 <p>. 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!