Σε τι χρησιμοποιούνται το forwardRef και το useImperativeHandle;

Question

Accepted Answer

Μια `ref` που μεταφέρεται σε ένα προσαρμοσμένο component δεν φτάνει **αυτόματα** σε έναν κόμβο DOM μέσα του. **`forwardRef`** επιτρέπει σε ένα component να λάβει μια ref και να την επισυνάψει σε ένα στοιχείο-παιδί. **`useImperativeHandle`** προσαρμόζει *τι* αποκαλύπτει αυτή η ref. ## Προώθηση ref σε κόμβο DOM ```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(); ``` ## Αποκάλυψη ενός προσαρμοσμένου API αντί του ακατέργαστου κόμβου Αποψ δεν θέλετε να διαρρεύσετε ολόκληρο τον κόμβο DOM — μόνο συγκεκριμένες μεθόδους: ```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(); ``` ## Πότε να το χρησιμοποιήσετε (σπάνια) Προτιμήστε props/state για επικοινωνία. Καταφύγετε στις refs μόνο για πραγματικές **αναγκαίες** ανάγκες: διαχείριση εστίασης, κύλιση, επιλογή κειμένου, αναπαραγωγή πολυμέσων ή ενσωμάτωση απαραίτητων βιβλιοθηκών. Σημείωση: στο **React 19**, το `ref` μπορεί να μεταφερθεί ως κανονικό prop, οπότε το `forwardRef` συχνά δεν είναι πλέον απαραίτητο.