Ref dalam React

Jika kita ingin mengingat suatu informasi, tapi tidak ingin perubahannya memicu render ulang komponen, maka kita akan membutuhkan ref dan sesuai dengannya hook useRef yang bekerja dengannya.

Ref (atau referensi) adalah objek JavaScript biasa dengan satu-satunya properti current, yang dapat Anda baca atau ubah.

Seperti state, ref dapat menyimpan tipe data apa pun - bisa berupa angka, string, objek, dan bahkan fungsi.

Jika data Anda digunakan untuk rendering, simpanlah dalam state, dan jika Anda tidak membutuhkan rendering, dalam hal seperti itu penggunaan ref dapat menjadi lebih efisien. Selain itu, tidak seperti state, nilai ref berubah secara langsung.

Secara umum ref diterapkan di mana Anda perlu menyimpang dari React dan berinteraksi dengan API eksternal - paling sering dengan API browser, yang tidak memengaruhi tampilan komponen. Ini bisa berupa contohnya penyimpanan id timer atau penyimpanan objek, yang tidak perlu dihitung JSX-nya, tetapi paling sering ini adalah interaksi dengan elemen DOM. Ref dapat diterapkan untuk mengelola fokus, seleksi teks atau pemutaran media.

Pada pelajaran berikutnya, kita akan membahas kerja dengan ref dan hook useRef secara praktis.