Reactjs Forwardref Useimperativehandle Lanjut Imperative API Focus Scroll

Definisi

forwardRef meneruskan ref ke DOM/child internal. useImperativeHandle membatasi API imperatif yang diekspos ke parent (misal .focus(), .scrollTo()) tanpa membuka seluruh node. Di React 19, ref bisa jadi prop biasa tanpa forwardRef.

Kapan dipakai

Pakai saat parent butuh memicu aksi pada child (focus input, buka modal, reset form) tanpa mengontrol state child penuh. Hindari kalau cukup lewat props/state biasa.

Cara kerja

forwardRef + useImperativeHandle

jsx

const Input = forwardRef((props, ref) => {
  const local = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => local.current.focus(),
    clear: () => { local.current.value = ''; },
  }), []);
  return <input ref={local} {...props} />;
});
 
// parent
const ref = useRef();
<Input ref={ref} />
<button onClick={() => ref.current.focus()}>Fokus</button>

React 19 (ref sebagai prop)

jsx

function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

Struktur alur

Catatan implementasi

• useImperativeHandle dengan dependency array [] agar handle stabil; kalau butuh nilai terkini, tambahkan dep.
• Ekspos hanya method perlu, bukan seluruh DOM — enkapsulasi lebih baik.
• React 19 menghapus kebutuhan forwardRef untuk banyak kasus; tetap valid di 18.
• Jangan pakai untuk data flow biasa; gunakan props/state.

Kesalahan umum

• Ekspos seluruh node: kehilangan enkapsulasi; batasi via imperative handle.
• Lupa forwardRef: ref jadi null di parent.
• Handle tidak stabil: dependency array salah, method usang.
• Over-imperative: sering tanda state harus diangkat ke parent.

Referensi terkait

• React Refs: useImperativeHandle, forwardRef, DOM Access
• React Hooks: useState, useEffect, useMemo, useCallback, useRef
• React Server Components: RSC, Client Boundary