Contoh Praktis Menggunakan useRef Hook di React

Penjelasan singkat tentang useRefhook di React.

Artikel ini akan menjelaskan topik yang terkadang membingungkan beberapa developer, terutama yang baru dengan React.

Kait useRef jika Anda tidak memiliki gagasan yang jelas tentang cara kerja kait ini? Kapan Anda harus menggunakannya? artikel ini akan bermanfaat bagi Anda.

gunakanRef Hook

The useRefadalah fungsi yang dapat mengambil argumen dan mengembalikan objek dengan properti currentdengan nilai yang ditetapkan.

Bagaimana Jika saya ingin mengubah nilai itu? Tulis saja sebagai berikut val.current = “bar"dan nilainya akan berubah karena useRefbisa berubah, yang berarti dapat diberikan dengan nilai apa pun, juga node dan elemen DOM sebagai nilai.

Sekarang nilainya var.currenttelah berubah, tetapi komponennya akan tetap sama ini karena useReftidak merender ulang komponen tetapi mari kita mencetak nilai var.current.

Nilai telah berubah tetapi tidak tercermin dalam komponen. Ini adalah fitur yang berguna karena kita dapat mengubah nilai komponen atau properti di elemen DOM tanpa merender ulang komponen.

Akses elemen di DOM

Cara yang paling umum digunakan useRefadalah mengakses elemen DOM. Cara melakukannya adalah dengan menambahkan properti refdi elemen DOM.

Dengan melakukan ini, kita dapat mengakses elemen dengan val.currentdan mengubah propertinya dengan cara yang sama seperti mendapatkan elemen dengan getElementById.

Dalam kode di atas, saya menambahkan tombol yang pada acara klik, memicu fungsi yang mengubah teks menjadi 'Hola Mundo' dan latar belakang menjadi merah.

Ini bekerja dengan sempurna dan tanpa merender ulang elemen.

Kesimpulan

The useRefhook, karena Anda mungkin melihat, memungkinkan melakukan tindakan yang kompleks dalam komponen kami untuk meningkatkan kinerja dan interaktivitas dari aplikasi kita. Saya harap Anda menemukan artikel ini bermanfaat. Terima kasih telah membacanya.

Belajarlah lagi