Për çfarë shërbejnë forwardRef dhe useImperativeHandle?

Question

Accepted Answer

Një `ref` e kaluar në një komponent të personalizuar **nuk** arrin automatikisht në një nyje DOM brenda tij. **`forwardRef`** lejon një komponent të marrë një ref dhe ta bashkojë atë me një element fëmije. **`useImperativeHandle`** përshtat *çfarë* e ekspozoni ajo ref. ## Pse ka rëndësi ```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(); ``` ## Ekspozimi i një API të personalizuar në vend të nyjës të papërpunuar Ndonjëherë nuk dëshiron të zbulosh të gjithë nyjën DOM — vetëm metoda specifike: ```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(); ``` ## Kur ta përdorësh (rrallë) Prefero props/state për komunikim. Shko te refs vetëm për nevojat vërtet **imperative**: menaxhim fokusi, rrëshqitje, zgjedhje teksti, luajtje medieje, ose integrimi i bibliotekave imperative. Shënim: në **React 19**, `ref` mund të kaloj si një prop normal, prandaj `forwardRef` shpesh nuk kërkohet më.