Reactjs Useid Usetransition Deep Hook Order Stable Keys

React.js1 September 20262 menit baca

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

Selesai membaca dokumentasi ini?

Kembali ke rujukan utama React.js untuk melanjutkan topik lainnya.

Kembali ke Kategori

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} />}
    </>
  );
}

Reactjs Useid Usetransition Deep Hook Order Stable Keys | Rujukan Pemrograman | Mahir.dev Academy

Reactjs Useid Usetransition Deep Hook Order Stable Keys

Reactjs Useid Usetransition Deep Hook Order Stable Keys

Definisi

Kapan dipakai

Cara kerja

useId

Selesai membaca dokumentasi ini?

useTransition

Struktur alur

Contoh kombinasi

Catatan implementasi

Kesalahan umum

Referensi terkait