Skip to main content

React DOM

What is DOM?

DOM, abbreviated as Document Object Model, is a World Wide Web Consortium standard logical representation of any webpage. In easier words, DOM is a tree-like structure that contains all the elements and it's properties of a website as its nodes. DOM provides a language-neutral interface that allows accessing and updating of the content of any element of a webpage.

Before React, Developers directly manipulated the DOM elements which resulted in frequent DOM manipulation, and each time an update was made the browser had to recalculate and repaint the whole view according to the particular CSS of the page, which made the total process to consume a lot of time. As a betterment, React brought into the scene the virtual DOM. TheVirtual DOMcan be referred to as a copy of the actual DOM representation that is used to hold the updates made by the user and finally reflect it over to the original Browser DOM at once consuming much lesser time.

What is ReactDOM?

ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing the following methods and a few more.

  • render()
  • findDOMNode()
  • unmountComponentAtNode()
  • hydrate()
  • createPortal()

Important Points to Note

  • ReactDOM.render() replaces the child of the given container if any. It uses a highly efficient diff algorithm and can modify any subtree of the DOM.
  • findDOMNode() function can only be implemented upon mounted components thus Functional components can not be used in findDOMNode() method.
  • ReactDOM uses observables thus provides an efficient way of DOM handling.
  • ReactDOM can be used on both the client-side and server-side.

https://www.geeksforgeeks.org/reactjs-reactdom

https://reactjs.org/docs/react-dom.html

https://www.npmjs.com/package/react-dom