React DOM API

React-DOM API adalah modul yang menyediakan metode-metode spesifik untuk DOM yang dapat digunakan pada level teratas dari aplikasi.

1. Sebagian besar komponen tidak memerlukan metode pada modul ini
2. Metode yang tersedia di react-dom:
• render
• hydrate
• unmountComponentAtNode
• findDOMNode
• createPortal

ReactDOM.render()

1. Metode ini berfungsi untuk merender elemen React ke container DOM dan mengembalikan referensinya ke komponen
2. Jika sebelunya elemen React telah di render ke container, maka yang akan dilakukan adalah melakukan pembaruan elemen tersebut dan hanya memutasi DOM seperlunya
3. Jika tersedia, callback (opsional) akan dijalankan setelah komponen dirender atau diperbarui

ReactDOM.hydrate()

1. Metode ini seperti render, tetapi digunakan untuk menghidrasi container yang dirender oleh ReactDOMServer
2. React mengharapkan konten yang dirender identik antara server dan client, bila tidak maka React akan memperingatkan ketidaksesuaiannya selama hidrasi
3. Jika sebuah atribut dari elemen berbeda antara server dengan client (contohnya timestamp), maka peringatan bisa disembunyikan dengan suppressHydrationWarning={true}

ReactDOM.unmountComponentAtNode()

1. Metode ini digunakan untuk melepaskan (unmount) komponen React dari DOM dan membersihkan penanganan event dan state
2. Return true jika komponen berhasil dilepaskan
3. Return false jika tidak ada komponen yang dilepaskan

ReactDOM.findDOMNode()

1. Metode ini berguna untuk membaca nilai keluar dari DOM, seperti nilai pada form field dan melakukan pengukuran pada DOM
2. Umumnya, bisa digunakan sebuah ref pada DOM dan menghindari penggunaan findDOMNode

ReactDOM.createPortal()
Portal menyediakan cara untuk merender child menjadi DOM node yang berada di luar hierarki komponen DOM

Kesimpulan

React-DOM API dapat digunakan untuk melakukan aktifitas pada level tertinggi pada DOM

Sumber Referensi : reactjs.org | reactjs.org | tutorialspoint | w3schools