forwardRef: Mengekspos Ref DOM kepada Induk

Ref adalah cara untuk menyimpan referensi ke node DOM atau instans komponen yang tetap bertahan di antara perenderan tanpa memicu perenderan ulang. Anda memasangnya dengan atribut ref, lalu React mengisi properti current-nya setelah melakukan commit ke DOM.

Kendalanya, Anda tidak dapat memasang ref pada komponen fungsi seperti pada div. Secara bawaan, komponen induk tidak memiliki jalur untuk menjangkau node DOM yang berada di dalam komponen anak, karena ref tidak diteruskan seperti properti biasa.

React.forwardRef memungkinkan komponen menerima ref dari komponen induknya dan meneruskannya ke salah satu elemennya sendiri. Fungsi ini membungkus fungsi komponen Anda dan mengubah tanda tangan fungsi tersebut sehingga ref diterima sebagai argumen kedua bersama props.

Ini adalah mekanisme resmi untuk mengekspos node DOM bagian dalam kepada komponen pemanggil, sehingga anak yang sebelumnya tidak dapat diakses langsung menjadi komponen yang elemennya dapat dirujuk secara langsung oleh komponen induk.

Fungsi yang dibungkus menerima dua parameter: (props, ref). Parameter pertama adalah objek props biasa, sedangkan parameter kedua adalah ref yang diteruskan. Selanjutnya, sebarkan atau pasangkan ref tersebut pada elemen yang ingin Anda ekspos, misalnya ref={ref} pada input bagian dalam.

Ingat, hanya komponen yang dibungkus dengan forwardRef yang menerima argumen kedua ini. Komponen fungsi biasa yang mencantumkan ref sebagai parameter kedua akan menerima undefined.

Contoh klasiknya adalah komponen bidang teks yang dapat digunakan kembali, dengan input bagian dalam yang ingin Anda fokuskan dari komponen induk. Dengan membungkus bidang tersebut menggunakan forwardRef dan memasang ref yang diteruskan pada elemen input dasarnya, komponen induk dapat memanggil focus secara langsung.

Dengan cara ini, komponen bidang tetap dapat digunakan kembali sekaligus memberikan akses imperatif yang terkendali tepat di tempat yang dibutuhkan, misalnya untuk memfokuskan bidang pertama pada formulir saat dipasang.

Ref yang diteruskan juga memungkinkan pengukuran. Komponen induk dapat membaca offsetWidth, offsetHeight, atau memanggil getBoundingClientRect pada elemen anak yang diterimanya melalui forwardRef.

Hal ini berguna untuk petunjuk, panel pop-up, dan perhitungan tata letak ketika komponen induk perlu mengetahui ukuran atau posisi persis elemen bagian dalam yang telah ditampilkan sebelum menentukan posisi sesuatu yang terkait dengannya.

Karena ref yang diteruskan menunjuk ke node DOM nyata, komponen induk dapat memanggil metode DOM bawaan pada node tersebut. Pemanggilan scrollIntoView pada entri daftar yang ref-nya diteruskan akan menampilkannya dengan mulus, sedangkan scrollTo pada wadah pengguliran yang ref-nya diteruskan akan mengubah posisi kontennya.

Tindakan ini bersifat imperatif dan tidak memiliki padanan deklaratif yang rapi, tepat seperti jenis interaksi yang dirancang untuk ditangani oleh ref.

Terkadang elemen yang ingin Anda ekspos berada beberapa tingkat komponen di dalam. Anda dapat merangkai forwardRef sehingga setiap lapisan perantara meneruskan ref yang diterimanya ke lapisan berikutnya, sampai akhirnya ref tersebut berada pada node DOM target.

Setiap pembungkus dalam rangkaian ini harus menggunakan forwardRef dan meneruskan ref, karena komponen biasa di tengah rangkaian akan memutus koneksi tersebut.

forwardRef dan React.memo dapat digabungkan untuk memperoleh penerusan ref sekaligus memoization perenderan. Urutan yang biasanya digunakan adalah memo(forwardRef(Component)), dengan membungkus hasil forwardRef agar perbandingan memo tetap berlaku.

Pola ini sering digunakan dalam sistem desain yang peka terhadap kinerja, ketika komponen yang sering ditampilkan harus mengekspos node-nya sekaligus melewati perenderan ulang yang tidak diperlukan.

Di React DevTools, komponen forwardRef ditampilkan dengan label ForwardRef yang membungkus nama komponen Anda. Dengan begitu, Anda dapat segera memastikan bahwa suatu komponen berpartisipasi dalam penerusan ref.

Anda dapat memberi nama pada fungsi bagian dalam atau menetapkan displayName agar entri di DevTools lebih jelas daripada label ForwardRef anonim yang umum.

forwardRef digunakan untuk mengekspos node DOM dan kendali imperatif, bukan untuk meneruskan data. Jika komponen induk perlu memengaruhi komponen anak, utamakan properti dan status biasa daripada menjangkaunya melalui ref.

Penggunaan ref secara berlebihan membuat komponen saling bergantung secara erat dan melewati aliran data React, sehingga perilaku lebih sulit dipahami. Gunakan forwardRef hanya ketika properti deklaratif benar-benar tidak dapat menyatakan interaksi tersebut.

forwardRef tetap menjadi alat standar untuk mengekspos ref dalam pustaka komponen dan input yang dapat digunakan kembali. Versi React yang lebih baru mulai mengarah pada penerusan ref sebagai properti biasa, tetapi forwardRef masih banyak digunakan dan penting untuk dipahami.

Dengan menguasainya, Anda akan siap menghadapi basis kode yang sudah ada sekaligus memahami mekanisme dasar yang menjadi landasan sintaksis ref sebagai properti di masa mendatang.

Uji pemahaman Anda tentang cara komponen forwardRef menerima ref.

forwardRef mengatasi keterbatasan bahwa komponen induk tidak dapat menjangkau node DOM milik komponen anak dengan memberikan argumen ref kedua kepada komponen, yang kemudian dapat diteruskannya ke elemen bagian dalam. Dengan demikian, komponen induk dapat memfokuskan, mengukur, dan menggulir elemen anak.

forwardRef dapat dikomposisikan dengan memo, dirangkai melalui beberapa lapisan, dan ditampilkan sebagai ForwardRef di DevTools. Gunakan forwardRef untuk akses DOM imperatif, bukan untuk meneruskan data, karena properti lebih sesuai untuk hal tersebut.