Mihin forwardRef ja useImperativeHandle ovat tarkoitettu?

Question

Accepted Answer

Mukautettuun komponenttiin välitetty `ref` ei **automaattisesti** saavuta sen sisäisen DOM-solmun. **`forwardRef`** antaa komponentin vastaanottaa ref:in ja liittää sen alielementtiin. **`useImperativeHandle`** mukauttaa, *mitä* tämä ref paljastaa. ## Ref:in välittäminen DOM-solmuun ```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(); ``` ## Mukautetun API:n paljastaminen raa'an solmun sijaan Joskus et halua paljastaa koko DOM-solmua — vain tiettyjä metodeja: ```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(); ``` ## Milloin sitä käytetään (harvoin) Suosi props/state-viestintää. Turvaudu ref:iin vain todellisiin **imperatiivisiin** tarpeisiin: fokuksen hallinta, vierittäminen, tekstin valinta, median toisto tai pakotettujen kirjastojen integrointi. Huomio: **React 19**:ssä `ref` voidaan välittää tavallisena prop:ina, joten `forwardRef` ei usein enää ole pakollinen.