Morrice - Blog

Morrice

No meu blog você poderá encontrar diversas informações sobre programação, principalmente na área do front-end com ReactJS e NextJS.

Maneira mais performática de capturar o valor de um input no React

Descubra a maneira mais performática de capturar o valor de um input no React utilizando o Hook useRef.

React.js Logo

Por Eliel Gaspar | | TypescriptReact

Com refs é possível impedir a re-renderização do componente quando for digitado, evitando o uso de estados desnecessários.

const App: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  function handleChange() {
    console.log(inputRef.current.value);
  }

  return (
    <input
      type="text"
      onChange={handleChange}
      ref={inputRef}
    />
  );
};

Assim, seu componente se torna bem mais performático.

 

;