8.4-useRef.md

React Hooks

useRef

O useRef é um Hook utlizado para acessar a referência valor sem que ele seja associado ao estado do componente para evitar que o elemento renderize novamente quando a refência mudar seu valor, esse hook recebe como parâmetro um valor inicial e retorna um objeto com uma referência mutável ao valor inserido, para acessar esse valor usamos a propriedade .current que é a referência do elemento.

Com isso podemos salvar tambem elementos HTML para que consigamos efeitos que se assemelham aos métodos Finding HTML Elements do JavaScript nos Browsers. Ex.: document.getElementById(), document.getElementsByClassName() e etc.

Para que façamos isso, passamos essa Ref como propriedades para o componente que queremos referenciar. Assim guardamos uma referência do elemento DOM como valor da nossa Ref.

Exemplo:

import React, { useRef } from 'react';

function ContactForm() {
  // Criamos uma const que recebe o useRef passando null como parâmetro inicial
  // Quando o elemento for renderizado em tela a variável inputRef será atualizada
  // A partir da primeira renderização, o valor será o elemento <input/>
  const inputRef = useRef(null);

  const handleContinue = () => {
    // Podemos acessar as informações do elemento
    // Nesse if verifico se o input possui algum valor, e se não, chamo a função focus
    if (!inputRef.current.value) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      {/* Quando esse elemento for renderizado atualizará a variável com a sua referência */}
      <input ref={inputRef} placeholder='Digite seu Email' />

      <button onClick={handleContinue}>Continuar</button>
    </div>
  );
}

Ir para a próxima seção