Uma ref passada para um componente personalizado não chega automaticamente a um nó DOM dentro dele. forwardRef permite que um componente receba uma ref e a anexe a um elemento filho. useImperativeHandle personaliza o que essa ref expõe.
Uma ref passada para um componente personalizado não chega automaticamente a um nó DOM dentro dele. forwardRef permite que um componente receba uma ref e a anexe a um elemento filho. useImperativeHandle personaliza o que essa ref expõe.
const TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} {...props} />; // parent's ref now points to the <input>
});
// parent can focus the inner input:
const ref = useRef(null);
<TextInput ref={ref} />;
// ref.current.focus();
Às vezes você não quer vazar o nó DOM inteiro — apenas métodos específicos:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
Prefera props/state para comunicação. Recorra a refs apenas para necessidades genuinamente imperativas: gerenciamento de foco, rolagem, seleção de texto, reprodução de mídia ou integração de bibliotecas imperativas. Nota: no React 19, ref pode ser passado como um prop normal, portanto forwardRef geralmente não é mais necessário.
Uma biblioteca de perguntas de entrevista de TI com respostas detalhadas — de Júnior a Sênior.
Doar