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

Sintaxe:

Para utilizar o hook useRef, declaramos uma variável (refVariable) e atribuímos o resultado da invocação de useRef() a ela. Opcionalmente, podemos fornecer um valor inicial (initialValue) como argumento para esse hook.

Nota

O valor atual pode ser acessado e atualizado usando a propriedade refVariable.current. A beleza do useRef é que ele nos permite manipular esses valores sem desencadear 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 (input) e foca nele quando um botão é clicado.

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

Explicação linha por linha:

• Linha 1: Importamos o hook useRef da biblioteca React para aproveitar sua funcionalidade.
• Linha 3: O componente FormInput é definido usando a sintaxe convencional de função.
• Linha 4: Inicializamos a variável inputRef usando o hook useRef, representando a referência do input.
• Linhas 6-8: Esta função de seta do JavaScript lida com a lógica de clicar no botão, que foca o cursor do usuário no campo de input.
• Linhas 10-15: O markup do componente é renderizado.
  1. Na linha 12, definimos a referência usando o atributo ref e atribuímos a variável inputRef como seu valor.
  2. O botão na linha 13 utiliza o atributo onClick para especificar a função a ser executada quando clicado, que neste caso é a função handleClick.

Código completo do aplicativo: