K čemu slouží forwardRef a useImperativeHandle?

Question

Accepted Answer

Ref předaný do vlastní komponenty **automaticky** nedosáhne DOM uzlu uvnitř ní. **`forwardRef`** umožňuje komponentě přijmout ref a připojit jej k podřízanému prvku. **`useImperativeHandle`** přizpůsobuje *co* daný ref odhaluje. ## Přesměrování ref na DOM uzel ```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(); ``` ## Odhalení vlastního API místo surového uzlu Častěji nechcete odhalit celý DOM uzel — pouze konkrétní metody: ```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(); ``` ## Kdy to používat (vzácně) Dávejte přednost props/state pro komunikaci. Sahibujte se referencí pouze pro skutečně **imperativní** potřeby: správa fokusu, posouvání, výběr textu, přehrávání médií nebo integrace imperativních knihoven. Poznámka: v **React 19** lze `ref` předat jako běžný prop, takže `forwardRef` už často není potřeba.