Apa fungsi forwardRef dan useImperativeHandle?

Question

Accepted Answer

Sebuah `ref` yang diteruskan ke komponen kustom **tidak secara otomatis** menjangkau node DOM di dalamnya. **`forwardRef`** memungkinkan komponen menerima ref dan melampirkannya ke elemen child. **`useImperativeHandle`** menyesuaikan *apa* yang ref tersebut tampilkan. ## Meneruskan ref ke node 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(); ``` ## Menampilkan API kustom alih-alih node raw Kadang Anda tidak ingin membocorkan seluruh node DOM — hanya method tertentu: ```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(); ``` ## Mengapa ini penting Lebih suka props/state untuk komunikasi. Gunakan refs hanya untuk kebutuhan yang benar-benar **imperatif**: manajemen fokus, scrolling, pemilihan teks, pemutaran media, atau mengintegrasikan library imperatif. Catatan: di **React 19**, `ref` dapat diteruskan sebagai prop normal, jadi `forwardRef` sering kali tidak lagi diperlukan.