Conhecendo o hook useRef do React JS

Introdução ao hook useRef

O useRef é um hook do React que pode ser usado para criar e armazenar uma referência a um elemento HTML ou a um componente React dentro de um componente funcional. Ele retorna um objeto de referência mutável que pode ser atualizado sem disparar uma nova renderização.

A principal finalidade do useRef é permitir o acesso a um elemento do DOM ou a um componente filho sem a necessidade de re-renderizar o componente pai. Isso é particularmente útil em situações em que é necessário acessar o estado ou as propriedades de um componente filho, ou quando é necessário atualizar um elemento do DOM de forma imperativa.

O objeto de referência retornado pelo useRef possui uma propriedade current que pode ser usada para acessar ou modificar o valor atual da referência. A propriedade current é inicialmente definida como null, mas pode ser atualizada com qualquer valor em qualquer momento, e essas atualizações não causarão uma nova renderização do componente.

Aqui está um exemplo de como usar useRef:

import React, { useRef } from 'react';

function ExampleComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

Neste exemplo, criamos uma referência a um elemento input usando useRef e armazenamos essa referência em inputRef. Em seguida, criamos uma função handleClick que é chamada quando o botão é clicado. Dentro dessa função, chamamos o método focus() do objeto de referência inputRef.current para focar no elemento input. Como a atualização do objeto de referência inputRef.current não faz com que o componente seja re-renderizado, o foco é aplicado ao elemento input sem causar um efeito colateral.

Se você também achou o comportamento do useRef  familiar…

Em JavaScript, podemos criar um objeto de referência para um elemento HTML usando o método document.getElementById() ou o método document.querySelector() e armazenar essa referência em uma variável. Em seguida, podemos acessar as propriedades e métodos desse elemento usando a referência armazenada.

Por exemplo, podemos criar uma referência para um elemento input da seguinte forma:

const inputRef = document.getElementById('myInput');

Em seguida, podemos acessar as propriedades e métodos desse elemento usando a propriedade current da referência:

console.log(inputRef.current.value);
inputRef.current.focus();

Essa abordagem é semelhante ao uso do useRef em componentes React, onde criamos uma referência para um elemento HTML ou componente React usando o useRef, armazenamos essa referência em uma variável e acessamos as propriedades e métodos desse elemento usando a propriedade current da referência.

Então porque utilizar useRef ao invés do document.querySelector por exemplo?

O hook useRef é recomendado para acesso a elementos do DOM em componentes React por algumas razões:

1. Performance: O uso de querySelector é um método que percorre todo o DOM e pode ser muito lento em elementos grandes e complexos, enquanto o hook useRef armazena uma referência ao elemento diretamente, sem a necessidade de percorrer o DOM.
2. Tipagem: O hook useRef é tipado, o que significa que ele oferece suporte ao Typescript e fornece segurança em tempo de compilação em relação ao tipo de elemento referenciado. Isso não é possível com querySelector.
3. Práticas recomendadas: O uso do hook useRef segue as práticas recomendadas da comunidade React, enquanto querySelector é uma técnica mais antiga e menos utilizada no ecossistema do React.

Portanto, é recomendado o uso do hook useRef para acessar elementos do DOM em componentes React, em vez de querySelector.

Vantagens e desvantagens no uso deste Hook

O useRef é uma ferramenta muito útil para acessar elementos do DOM ou componentes React dentro de um componente funcional sem disparar uma nova renderização. Algumas vantagens do uso do useRef incluem:

• Acesso imperativo ao DOM: o useRef permite o acesso imperativo ao DOM, o que pode ser útil em situações em que é necessário modificar o comportamento de um elemento sem atualizar o estado do componente.
• Armazenamento de referências: o useRef permite armazenar referências a elementos do DOM ou a componentes React para uso posterior. Isso pode ser especialmente útil em situações em que é necessário armazenar uma referência a um elemento ou componente e atualizar seu estado ou propriedades posteriormente.
• Melhora de performance: o uso do useRef pode melhorar a performance do aplicativo, pois evita a re-renderização desnecessária de componentes que não foram afetados pela atualização da referência.

No entanto, o uso do useRef também apresenta algumas desvantagens, tais como:

• Abuso de referências: o abuso do useRef pode tornar o código menos legível e dificultar a depuração. É importante usar referências somente quando necessário e manter o código organizado e fácil de entender.
• Dificuldade em seguir o fluxo de dados: o uso do useRef pode tornar o fluxo de dados mais difícil de seguir, especialmente em aplicativos maiores. É importante documentar cuidadosamente o uso de referências e garantir que o código seja fácil de entender e manter.
• Possíveis problemas de sincronização: o uso de referências pode levar a possíveis problemas de sincronização, especialmente em situações em que várias referências são usadas em diferentes partes do código. É importante tomar cuidado ao usar referências e garantir que todas as atualizações de referência sejam tratadas corretamente.

O que significa o acesso imperativo ao DOM?

O acesso imperativo ao DOM utilizando o useRef é uma técnica utilizada em bibliotecas de gerenciamento de estado em React para acessar e manipular elementos do DOM diretamente, sem precisar recorrer a métodos de manipulação de eventos ou de estado. O hook useRef é utilizado para criar uma referência a um elemento do DOM e permitir que ele seja acessado por métodos imperativos, como focus(), scrollIntoView() ou outros. Isso pode ser útil em casos em que a manipulação do DOM é necessária para implementar determinadas funcionalidades, como animações, scroll infinito, manipulação de formulários e etc.