Reactjs Useid Usetransition Deep Hook Order Stable Keys

Definisi

• useId: generate ID unik dan stabil lintas server/client untuk atribut id + htmlFor (aksesibilitas form), menghindari hydration mismatch.
• useTransition: tandai update "non-urgent" agar UI tetap responsif sambil update berat berjalan di background; mengembalikan [isPending, startTransition].

Kapan dipakai

• useId: pasangkan <label> dengan <input>, ARIA, atau generate id untuk komponen yang di-render beberapa kali.
• useTransition: saat ada input yang memicu render berat (filter list besar, ganti tab dengan chart) dan kamu tidak mau mengetik terasa lag.
• Jangan pakai useId untuk key list (pakai id data); jangan pakai transition untuk update yang harus synchronous.

Cara kerja

useId

jsx

function Field() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Nama</label>
      <input id={id} />
    </>
  );
}

useTransition

jsx

function Search({ list }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
 
  function onChange(e) {
    const v = e.target.value;
    startTransition(() => {
      setQuery(v); // render berat di-background
    });
  }
  return (
    <>
      <input onChange={onChange} />
      {isPending ? <Spinner /> : <Results q={query} list={list} />}
    </>
  );
}

Struktur alur

Contoh kombinasi

jsx

const id = useId();
// id stabil untuk aria-describedby saat error muncul

Catatan implementasi

• useId menghasilkan string dengan : (contoh :r0:) — valid untuk HTML tapi tidak untuk querySelector; kalau butuh selector, sanitasi.
• Transition tidak menunda event handler, hanya update state di dalamnya.
• Bisa nested transition; isPending hanya untuk transition terdekat.
• Untuk data async, kombinasikan dengan useDeferredValue bila tidak ada event pemicu eksplisit.

Kesalahan umum

• Pakai useId sebagai key: sebaiknya pakai id dari data, bukan generated id.
• Transition untuk update synchronous: malah nambah delay.
• Lupa tampilkan isPending: user tidak tahu sedang memproses.
• useId di querySelector: : bukan selector valid tanpa escape.

Referensi terkait

• Concurrent Features: useTransition, useDeferredValue, startTransition
• React Server Components: RSC, Client Boundary
• State Management: Local, Lifted, Context, Reducer, External Store