No React, podem haver situações em que você precise de acesso direto a um elemento DOM. É aí que as "refs" são úteis. Refs também podem armazenar valores mutáveis, mas state é uma escolha melhor para isso. No JavaScript puro, você usava os métodos getElementById() e querySelector() para acessar elementos do DOM. Mas no React, você usa refs para acessar elementos no DOM. Uma das principais diferenças é que, com refs, você não precisa de identificadores como IDs e classes para referenciar elementos. Então, como você pode criar e usar refs? React fornece um hook useRef() que permite que você faça exatamente isso.  O primeiro passo é importar o hook do React:

import { useRef } from "react";

Em seguida, você precisa criar uma variável que contenha a ref com o valor inicial da ref dentro do hook useRef, digamos uma sectionRef inicializada como null:

const sectionRef = useRef(null);

A última coisa a fazer é anexar a variável ref ao elemento no seu JSX usando o atributo ref:

<section ref={sectionRef}>
  {/* Section content */}
</section>

Se você registrar o ref no console, verá que é um objeto com o valor atual, neste caso, null:

console.log(sectionRef); // { current: null }

Você também pode registrar o valor atual no console com a propriedade current para que você possa ver o valor diretamente:

console.log(sectionRef.current); // null

Os valores subsequentes do ref dependem do ciclo de vida do componente.  Por exemplo, o valor inicial de sectionRef será sempre null porque é assim que ele foi inicializado. Após o componente ser montado, o valor do ref será o elemento section ao qual o ref está anexado. Se o componente for desmontado, o valor da ref volta ao valor inicial de null. Um exemplo típico para demonstrar um ref é focar um elemento input ao renderizar ou ao clicar em um botão. Aqui está como fazer isso quando você clicar em um botão:

import { useRef } from "react";

const Focus = () => {
  const inputRef = useRef(null);

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

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

export default Focus;

No código acima, o inputRef é criado e anexado ao elemento input. Também há um botão com um evento onClick que chama uma função handleFocus. Tudo o que a função handleFocus faz é chamar o método focus() no elemento input. Observe que, porque input é um componente embutido que vem com o React, o elemento DOM real input é definido na propriedade current da ref. Então você chama o método focus() com input.current.focus(). Aqui estão algumas melhores práticas que você deve conhecer ao trabalhar com refs:

• Use refs principalmente para interagir com o DOM. Você também pode usá-los para dados mutáveis, mas state é uma escolha melhor para isso.
• Não use refs para gerenciamento básico de estado – para isso serve o useState.
• Certifique-se de verificar se ref.current existe antes de acessar suas propriedades. Aqui está como fazer isso novamente:

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

Isso previne erros caso o ref seja acessado antes de ser anexado ao DOM ou depois de ser removido.