Catatan Kuliah: Series Lanjutan React JS

Pengantar

• Dosen: Apip Saifulo
• Topik: Series lanjutan dari React JS
• Tujuan: Mempelajari topik-topik yang lebih advance dalam react yang belum dibahas sebelumnya.
• Menunggu rilis resmi React 19.

Materi Pertama: useId

• Apa itu useId?
  • Sebuah hook di React untuk menghasilkan unique ID.
  • Digunakan untuk atribut aksesibilitas dan lainnya.

Cara Menggunakan useId

• Import useId dari React.
• Gunakan useId di bagian atas komponen, sebelum sintaks HTML.
• Tidak membutuhkan parameter, mereturn string ID yang unik.
• Catatan:
  • useId harus dipanggil di bagian atas komponen, tidak dalam loop atau conditional.
  • Tidak digunakan untuk generate keys dari list, keys harus dihasilkan dari data.

Contoh Penggunaan

1. **Menginstal React:
   • Menggunakan Visual Studio Code.
   • Install React dengan perintah: npm create vite@latest [nama-project] --template react.
   • Masuk ke folder project dan install dengan npm i.
   • Jalankan project dengan npm run dev.**
2. Membuat Input dengan Unique ID:
   • Contoh komponen input dengan ID unique menggunakan useId.
   • Menghindari duplikasi ID dengan menggunakan useId.
   • Tambahkan label dan span untuk aksesibilitas.
3. Contoh Kombinasi:
   • Kombinasi label dan ID dari useId.
   • Menggunakan ARIA untuk aksesibilitas.
   • Setiap ID akan terasosiasi dengan komponen yang sama.

Kustomisasi

• Kustomisasi prefix identifier di main.jsx.
• Contoh: gunakan prefix "react-lanjutan" untuk ID yang dihasilkan.

Kegunaan dan Kelebihan useId

• Menghasilkan ID unik tanpa perlu memikirkan nilai default yang sama.
• Mempermudah dalam tracking dan analytics pada form.

Rangkuman

• useId adalah fitur yang jarang digunakan namun sangat berguna untuk menghasilkan ID unik.
• Penting untuk meningkatkan aksesibilitas web.
• Masih banyak topik lain yang akan dibahas dalam series ini, termasuk useCallback, useMemo, Suspense, dll.

Penutup

• Ajakan untuk subscribe, comment, like, dan share video.
• Pertemuan selanjutnya akan membahas topik-topik lain dalam React.