React Hook - useImperativeHandle §

---

O React Hook useImperativeHandle permite aos componentes funcionais personalizar a interface exposta por suas refs. Esse controle adicional sobre a ref é especialmente útil quando se trabalha com componentes mais complexos que necessitam de uma comunicação direta entre o componente pai e o filho.

Uso comum §

O useImperativeHandle é usado para especificar quais valores a ref do componente deve expor para o componente pai. Ele é geralmente utilizado dentro do corpo do componente funcional. Aqui está um exemplo básico:

import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 
// Componente filho que aceita uma ref
const ChildComponent = forwardRef((props, ref) => {
  // Ref interna para o elemento <input>
  const inputRef = useRef();
 
  // Expondo métodos específicos para o componente pai usar
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    // Outros métodos, se necessário
  }));
 
  return <input ref={inputRef} />;
});
 
// Componente pai que utiliza a ref personalizada
const ParentComponent = () => {
  // Ref para o componente filho
  const childRef = useRef();
 
  // Chamando o método focus do componente filho através da ref
  const handleClick = () => {
    childRef.current.focus();
  };
 
  return (
    <div>
      {/* Utilizando o componente filho encaminhando a ref */}
      <ChildComponent ref={childRef} />
      {/* Botão que chama o método focus do componente filho */}
      <button onClick={handleClick}>Focus no Input</button>
    </div>
  );
};

Neste exemplo, useImperativeHandle é usado para expor um método focus da ref do componente filho. Isso permite que o componente pai chame diretamente o método focus do <input> contido no componente filho.

Observação

Embora o useImperativeHandle seja uma ferramenta útil, é aconselhável usá-lo com moderação. Em muitos casos, é possível projetar componentes de forma que a comunicação ocorra principalmente por meio de props e state, evitando a necessidade de manipular refs diretamente.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)