Pentru ce servesc forwardRef și useImperativeHandle?

Question

Accepted Answer

O `ref` transmisă unui component personalizat **nu** ajunge automat la un nod DOM din interior. **`forwardRef`** permite unui component să primească o ref și să o atașeze unui element copil. **`useImperativeHandle`** personalizează *ceea ce* acea ref expune. ## De ce este important ```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(); ``` ## Expunerea unui API personalizat în loc al nodului brut Uneori nu vrei să divulgi întregul nod DOM — doar metode specifice: ```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(); ``` ## Când să-l folosești (rar) Preferă props/state pentru comunicare. Apelează la refs doar pentru nevoi cu adevărat **imperative**: gestionarea focusului, derularea, selectarea textului, redarea media sau integrarea bibliotecilor imperative. Notă: în **React 19**, `ref` poate fi transmis ca un prop normal, deci `forwardRef` adesea nu mai este necesar.