ref yang dilewatkan ke komponen khusus tidak secara otomatis mencapai simpul DOM di dalamnya. forwardRef memungkinkan komponen menerima ref dan melampirkannya ke elemen anak. useImperativeHandle menyesuaikan apa yang dipaparkan oleh ref itu.
const TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} {...props} />; // parent's ref now points to the <input>
});
// parent can focus the inner input:
const ref = useRef(null);
<TextInput ref={ref} />;
// ref.current.focus();
Kadang Anda tidak ingin membocorkan seluruh simpul DOM — hanya metode tertentu:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
Lebih suka props/state untuk komunikasi. Gunakan ref hanya untuk kebutuhan yang benar-benar imperative: manajemen fokus, pengguluran, pemilihan teks, pemutaran media, atau integrasi perpustakaan imperatif. Catatan: dalam React 19, ref dapat dilewatkan sebagai prop normal, jadi forwardRef sering kali tidak lagi diperlukan.