Mengoptimalkan Aksesibilitas dengan useId di React

¶useId Hook 101

useId adalah fitur yang diperkenalkan dalam React versi 18, yang dirancang untuk membuat ID unik dan stabil secara otomatis. Fitur ini sangat penting dalam konteks aksesibilitas, seperti untuk menghubungkan label dengan input form, memastikan konsistensi dan keunikan ID baik di sisi server maupun klien. Penggunaan useId ini memudahkan pengembangan, terutama dalam kasus server-side rendering, dengan menghindari konflik ID dan memperkuat integrasi elemen-elemen UI.

¶Bagaimana Cara Kerjanya ?

Saat kita menggunakan useId, React secara otomatis membuat ID yang unik untuk komponen tersebut. Ini berguna terutama ketika komponen yang sama muncul beberapa kali di halaman; setiap komponen akan memiliki ID yang berbeda.

¶Kapan Tidak Boleh Menggunakan useId?

Anda tidak boleh menggunakan useId untuk menghasilkan kunci (keys) dalam daftar. Dalam React, setiap item dalam daftar harus memiliki kunci unik, tapi kunci ini sebaiknya berasal dari data itu sendiri, bukan dari useId.

¶Menggunakan useId untuk Elemen Terkait

Jika Anda memiliki beberapa elemen yang saling terkait, seperti beberapa input dalam satu form, Anda bisa menggunakan useId untuk membuat awalan unik, lalu menambahkannya ke ID setiap elemen.

¶Menghindari Bentrokan ID di Aplikasi Berbeda

Jika Anda memiliki lebih dari satu aplikasi React di halaman yang sama, Anda bisa menetapkan awalan khusus untuk setiap aplikasi. Dengan cara ini, ID yang dihasilkan oleh satu aplikasi tidak akan bentrok dengan ID dari aplikasi lain.

¶Solusi untuk Re-render

Kali ini, saya akan menunjukkan kepada Anda terkait case yang penggunakan hook ini. Misalkan Anda membuat form untuk input password. Biasanya, label akan dihubungkan dengan input menggunakan atribut for pada label dan id pada input. Namun, jika form tersebut muncul beberapa kali di halaman yang sama, id yang sama akan menimbulkan masalah karena id harus unik.

Dengan useId, Anda bisa mengatasi masalah ini:

import { useId } from "react";

function PasswordField() {
     const passwordId = useId();

     return (
          <>
               <label htmlFor={passwordId}>Password:</label>
               <input id={passwordId} type="password" />
          </>
     );
}

¶Field yang Sama

Mungkin yang pertama Anda fikirkan adalah, jika memang sama, kenapa tidak kita bedakan namanya. Sebenarnya bisa, namun akan sulit jika memang sudah di bedah ke komponen yang berbeda.

Misalnya, ada komponen dengan nama EmailInput, dan sudah pasti isinya akan seperti:

export function EmailInput({ label }) {
    const id = useId();
    return (
        <div>
            <label htmlFor='email'>{label}:</label>
            <input id='email' type="email" name="email" />
        </div>
    );
}

Kemudian nantinya Anda akan coba panggil komponen ini dengan cara:

import { EmailInput } from './email-input'

export function UserForm() {
    return (
        <form>
            <EmailInput label="Email Utama" />
            <EmailInput label="Email Cadangan" />
        </form>
    );
}

Dengan begitu, maka id akan bentrok, di sinilah hook ini berperan penting. Perhatikan contoh berikut ini:

// EmailInput.jsx
import { useId } from "react";

function EmailInput({ label }) {
    const id = useId();
    return (
        <div>
            <label htmlFor={id + 'email'}>{label}:</label>
            <input id={id + 'email'} type="email" name="email" />
        </div>
    );
}

// UserForm.jsx
import { EmailInput } from './email-input'

function UserForm() {
    return (
        <form>
            <EmailInput label="Email Utama" />
            <EmailInput label="Email Cadangan" />
        </form>
    );
}

Dalam contoh ini, EmailInput adalah komponen terpisah yang digunakan beberapa kali dalam UserForm. Setiap EmailInput memanggil useId untuk menghasilkan ID unik. Ini memastikan bahwa setiap input memiliki ID yang berbeda meskipun name-nya sama ("email"), sehingga memudahkan pengelolaan form dan meningkatkan aksesibilitas.

Dan jika kita lihat pada dev console. Hasilnya akan unik seperti:

<form>
    <div>
        <label for=":r0:email">Email Utama:</label>
      	<input id=":r0:email" type="email" name="email" />
    </div>
    <div>
        <label for=":r1:email">Email Cadangan:</label>
      	<input id=":r1:email" type="email" name="email" />
    </div>
</form>

¶Kesimpulan

useId di React merupakan solusi efektif untuk mengatasi masalah ID yang duplikat dalam aplikasi yang kompleks. Dengan menghasilkan ID unik secara otomatis, useId memudahkan pengelolaan form dan meningkatkan aksesibilitas, terutama saat menggunakan komponen yang sama atau serupa dalam satu halaman. Ini juga membantu dalam skenario di mana komponen dibagi menjadi bagian-bagian yang lebih kecil.

Penggunaan useId menunjukkan pendekatan yang lebih dinamis dan fleksibel dibandingkan dengan penentuan ID secara hardcoded. Bagi para pengembang web, terutama yang berfokus pada React, memahami dan memanfaatkan useId bisa sangat membantu.

Semoga artikel ini bermanfaat dan semoga ini dapat menambah pengetahuan Anda terkait react hook. Saya Irsyad dan sampai jumpa di artikel selanjutnya.