React - Membuat ID Unik dengan useId

Halo teman-teman! 👋

Pernah gak sih kalian buka browser console terus nemu warning merah menyeramkan kayak gini?

Warning: Prop "id" did not match. Server: "cl-123" Client: "cl-456"

Nah, itu namanya Hydration Mismatch.

Biasanya ini kejadian kalau kalian coba generate ID random buat komponen kalian, misalnya pakai Math.random().

Kenapa bisa error? Soalnya server generate satu angka random, eh pas nyampe di browser, browser generate angka random yang beda. React jadi bingung deh karena pohon komponennya gak sinkron. 🤯

Cara Lama (Cara Salah) ❌

Dulu, kita harus ribet banget buat ngakalin ini. Pake global counter lah, pake library tambahan lah, cuma buat nyambungin <label> ke <input>.

Kalau kalian masih ngelakuin ini, siap-siap aja pusing:

// Jangan lakukan ini ya!
const BadComponent = () => {
  const id = `input-${Math.random()}`; // 😱 ID-nya gak stabil

  return (
    <>
      <label htmlFor={id}>Nama</label>
      <input id={id} type="text" />
    </>
  );
};

Solusinya: Hook useId ✅

Di React 18, ada hook baru yang didesain khusus buat masalah ini: useId.

Hook ini bakal nge-generate string unik yang stabil baik di server maupun di client. Bye-bye hydration error!

Cara pakenya gampang banget:

import { useId } from 'react';

const GoodComponent = () => {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Alamat Email</label>
      <input id={id} type="email" />
    </div>
  );
};

Simpel kan?

Gimana kalau butuh banyak ID?

Tenang, kalian gak perlu panggil useId sepuluh kali buat satu form. Cukup pake satu base ID terus tambahin suffix aja.

import { useId } from 'react';

const RegistrationForm = () => {
  const baseId = useId();

  return (
    <form>
      <div>
        <label htmlFor={`${baseId}-name`}>Nama</label>
        <input id={`${baseId}-name`} type="text" />
      </div>

      <div>
        <label htmlFor={`${baseId}-email`}>Email</label>
        <input id={`${baseId}-email`} type="email" />
      </div>
    </form>
  );
};

Rapi, terstruktur, dan aksesibel. Mantap! ♿️

Peringatan Penting ⚠️

JANGAN PERNAH pake useId buat generate key di list.

// ❌ JANGAN PERNAH KAYAK GINI
<ul>
  {items.map(item => (
    <li key={useId()}>{item.name}</li> // Ini salah besar!
  ))}
</ul>

Key itu harusnya dari data kalian (kayak item.id), bukan dari instance komponen. useId itu buat atribut aksesibilitas (kayak aria-labelledby), bukan buat rekonsiliasi data React.

Kesimpulan

Hook useId ini fitur kecil tapi sangat membantu di React 18. Dia nyelesain masalah hydration mismatch dan bikin form kita lebih aksesibel tanpa ribet.

Kalau kalian masih pake random number generator buat ID, mending buruan tobat dan upgrade ke useId!

Happy Coding! 🚀