Reactjs Refs Useimperativehandle Forwardref DOM Access Patterns

Definisi

ref di React adalah pegangan ke node DOM atau instance komponen, yang tidak memicu render saat diubah. useRef membuat objek { current } yang persisten antar render. forwardRef memungkinkan komponen meneruskan ref ke child, dan useImperativeHandle membatasi API imperatif yang diekspos ke parent.

Kapan dipakai

Pakai ref untuk hal yang bukan merupakan state UI: fokus input, scroll ke elemen, mengukur ukuran DOM, menyimpan timer/id interval, atau memanggil method imperatif komponen anak (misal reset() di form). Jangan pakai ref untuk data yang harus memicu re-render — itu tugas state.

Cara kerja

useRef dasar

tsx

const inputRef = useRef<HTMLInputElement>(null);
 
function focus() {
    inputRef.current?.focus();
}