Para que servem forwardRef e useImperativeHandle?

Question

Accepted Answer

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. ## Por que isso importa ```jsx const TextInput = forwardRef(function TextInput(props, ref) { return ; // parent's ref now points to the }); // parent can focus the inner input: const ref = useRef(null); ; // ref.current.focus(); ``` ## Expor uma API personalizada em vez do nó bruto Às vezes você não quer vazar o nó DOM inteiro — apenas métodos específicos: ```jsx const FancyInput = forwardRef(function FancyInput(props, ref) { const inner = useRef(null); useImperativeHandle(ref, () => ({ focus: () => inner.current.focus(), clear: () => { inner.current.value = ""; }, }), []); return ; }); // parent: fancyRef.current.focus(); fancyRef.current.clear(); ``` ## Quando usá-lo (com moderação) 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.