O hook useRef permite criar uma variável que armazena uma referência a um elemento, um valor ou qualquer outro dado que não afete a renderização do componente. Isso pode ser útil para armazenar valores mutáveis, acessar elementos do DOM ou preservar valores entre renderizações do componente.

Sintaxe:

Para utilizar o hook useRef, declara-se uma variável (refVariable) e atribui-se a ela o resultado da invocação de useRef(). Opcionalmente, pode-se fornecer um valor inicial (initialValue) como argumento para esse hook.

const refVariable = useRef(initialValue);

Nota

O valor atual pode ser acessado e atualizado utilizando a propriedade refVariable.current. A vantagem do useRef é permitir a manipulação desses valores sem disparar uma nova renderização do componente.

Exemplo:

Vamos criar o componente FormInput que utiliza o hook useRef para criar uma referência a um elemento de entrada e foca nele quando um botão é clicado.

import React, { useRef } from "react";

const FormInput = () => {
  const inputRef = useRef();

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

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

Neste exemplo, o hook useRef cria uma referência chamada inputRef. Essa referência é atribuída ao atributo ref do elemento input, permitindo acessar o elemento input usando inputRef.current.

Explicação linha por linha:

• Linha 1: Importa-se o hook useRef da biblioteca React para utilizar sua funcionalidade;
• Linha 3: O componente FormInput é definido utilizando a sintaxe convencional de função;
• Linha 4: Inicializa-se a variável inputRef utilizando o hook useRef, representando a referência do campo de entrada;
• Linhas 6-8: Esta função arrow do JavaScript gerencia a lógica ao clicar no botão, focando o cursor do usuário no campo de entrada;
• Linhas 10-15: O markup do componente é renderizado.
  1. Na linha 12, define-se a referência utilizando o atributo ref e atribui-se a variável inputRef como valor;

2. O botão na linha 13 utiliza o atributo onClick para especificar a função a ser executada ao ser clicado, que neste caso é a função handleClick.

Código completo do aplicativo: