Introdução

O que é useRef

useRef é um gancho React que permite criar uma referência persistente a um valor ou elemento DOM. Ao contrário de useState, que é usado para gerenciar o estado que aciona novas renderizações, useRef é usado principalmente para efeitos colaterais ou para acessar elementos DOM diretamente.

Por que usar useRef

O gancho useRef é particularmente útil para:

• Acessando elementos DOM diretamente: você pode usar useRef para obter uma referência a um elemento DOM, permitindo manipulá-lo diretamente sem acionar uma nova renderização.
• Crie valores persistentes: Ao contrário do estado, os valores criados com useRef persistem entre renderizações, tornando-os ideais para armazenar dados que não precisam acionar novas renderizações.

Compreendendo o gancho useRef

O gancho useRef retorna um objeto com propriedade .current. quando você chama useRef, ele cria uma referência persistente ao valor que você passa como argumento. Esta referência é armazenada na propriedade .current do objeto retornado.

Criando uma referência com useRef

Para criar uma referência basta chamar useRef com valor inicial.

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

No exemplo acima, countRef é uma referência ao valor inicial 0.

Acessando o valor de referência

Para acessar o valor de referência basta chamar o objeto countRef com a propriedade .current

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current  
  }

  return (
    

      
Count: {countRef.current}
      Increment
    
  )
}

export default App

No exemplo acima, se você clicar no botão, ele chamará a função de incremento que aumentará o countRef, mas a contagem não será atualizada em

Count: {countRef.current}

atualize o código para o exemplo abaixo para obter o resultado esperado.

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current  
    setCount(countRef.current)
  }

  return (
    

      
Count: {count}
      Increment
    
  )
}

export default App

Casos de uso comuns para useRef

Acessando e manipulando diretamente elementos DOM

é possível usar o gancho useRef para acessar e alterar as propriedades dos elementos html

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    
  )
}

Valores persistentes

Ao contrário de useState ou variável, useRef pode passar valores e dados entre re-renderizações, como dados em cache ou definições de configuração.

Otimização de desempenho

Em alguns casos, usar useRef pode ajudar na otimização de componentes, evitando novas renderizações desnecessárias. como se você tivesse um componente que renderiza uma grande lista de itens, você pode armazená-lo em cache usando useRef e modificar apenas a renderização dos itens que foram alterados.

Melhores práticas e considerações

• Não escreva ou leia ref.current durante a renderização
• Você pode alterar a propriedade ref.current
• Quando você altera a propriedade ref.current, o React não renderiza novamente seu componente
• As informações são locais para cada cópia do seu componente (ao contrário das variáveis ​​externas, que são compartilhadas). Você pode armazenar informações entre re-renderizações (ao contrário das variáveis ​​regulares, que redefinir em cada renderização).
• Você pode ler ou escrever referências de manipuladores de eventos ou efeitos.
• Manipulando o dom com ref

Passando uma referência para o componente personalizado.

Se você tentar passar uma referência para seu próprio componente assim

const inputRef = useRef(null);

return ;

Você pode receber um erro no console:
Aviso: Os componentes da função não podem receber referências. As tentativas de acessar esta referência falharão. Você pretendia usar React.forwardRef()?

Para resolver esse problema, envolva o componente personalizado com forwardRef assim:

const inputRef = useRef(null);

return ;

Componente personalizado:

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    
  );
});

export default MyInput;

Conclusão

useRef é um gancho poderoso usado principalmente para uso de efeitos colaterais, como armazenar dados em cache entre re-renderizações ou acessar elementos do DOM. É uma ótima ferramenta para otimização de desempenho e obtenção de funcionalidades específicas na aplicação React.