useRef: Mengakses Elemen & Menyimpan Nilai

Memakai ref untuk fokus input, mengakses DOM, dan menyimpan nilai tanpa render ulang.

Part 16 dari 23 ± 30 menit Gratis

useRef

useRef membuat kotak penyimpanan yang nilainya bertahan antar render tanpa memicu render ulang saat diubah. Dua kegunaan utama:

1. Mengakses elemen DOM

Beberapa hal hanya bisa dilakukan langsung pada elemen: memberi fokus, mengukur ukuran, memutar video.

import { useRef } from "react";

function FokusInput() {
  const inputRef = useRef(null);

  function fokus() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={fokus}>Fokus</button>
    </div>
  );
}

useRef(null) → { current: null }.
Atribut ref={inputRef} membuat React mengisi inputRef.current dengan elemen DOM.
Akses .current di event handler atau effect, bukan saat render.

2. Menyimpan nilai yang tidak memengaruhi tampilan

const jumlahRender = useRef(0);
jumlahRender.current += 1;        // tidak memicu render ulang

const timerId = useRef(null);
timerId.current = setInterval(...);   // menyimpan id timer agar bisa dibatalkan

State vs ref

	`useState`	`useRef`
Mengubah nilai memicu render ulang	Ya	Tidak
Nilai dibaca saat render	Boleh	Hindari
Cocok untuk	data yang tampil di layar	id timer, elemen DOM, nilai "belakang layar"

Kapan memakai ref untuk DOM?

Gunakan sebagai jalan keluar (escape hatch). Sebisa mungkin biarkan React yang mengatur DOM lewat state; gunakan ref hanya untuk kasus yang tidak bisa diekspresikan secara deklaratif (fokus, scroll, ukuran, integrasi library non-React).

Input tidak terkontrol (uncontrolled)

Alternatif form: baca nilai lewat ref saat submit (inputRef.current.value) tanpa state. Lebih sederhana untuk form kecil, tetapi kurang fleksibel dibanding controlled input.

Autofocus saat tampil

useEffect(() => {
  inputRef.current.focus();
}, []);