<\/p>\n

\n
• It is an object which exposes a number of top level APIs to interact with the browser DOM.<\/li>\n
• It 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.<\/li>\n
• Most of your components should not need to use this module.<\/li>\n
• It consists of following methods:\n
  \n
  • render ()<\/li>\n
  • findDOMNode ()<\/li>\n
  • unmountComponentAtNode ()<\/li>\n
  • create Portal ()<\/li>\n
  • hydrate ()<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

    <\/p>\n

    render ()<\/strong><\/h4>\n

    \n
    • It\u00a0is used to render a single React Component or several Components wrapped together in a Component or a div element.<\/li>\n
    • In ReactDom it is one of the most important methods.<\/li>\n
    • This function uses the efficient methods of React for updating the DOM by being able to change only a subtree, efficient diff methods, etc.<\/li>\n
    • Element, Container, Callback are three parameters used in this method.<\/li>\n<\/ul>\n

      Syntax<\/strong>:<\/p>\n

      <\/p>\n

      <\/h4>\n

      findDOMNode ()<\/h4>\n

      \n
      • It is used to get the DOM node where a particular React component was rendered.<\/li>\n
      • The following method can be done by adding a ref<\/strong> attribute to each component itself and it is used rarely in ReactDOM.<\/li>\n
      • It is also useful for reading values out of the DOM, such as form field values and performing DOM measurements.<\/li>\n
      • A single parameter component that expects a React Component to be searched in the Browser DOM.<\/li>\n<\/ul>\n

        Syntax<\/strong>:<\/p>\n

        <\/p>\n

        unmountComponentAtNode ()<\/strong><\/h4>\n

        \n
        • It is used to unmount or remove the React Component that was rendered to a particular container.<\/li>\n
        • It is better to remove the component, making the web page more efficient.<\/li>\n
        • A single parameter container which expects the DOM container from which the React component has to be removed.<\/li>\n<\/ul>\n

          Syntax<\/strong>:<\/p>\n

          <\/p>\n

          create Portal ()<\/strong><\/h4>\n

          \n
          • It is used to create a portal and provide a way to\u00a0render children into a DOM node that exists outside the hierarchy of the DOM component.<\/li>\n
          • It allows us to render a component into a DOM node that resides outside the current DOM hierarchy of the parent component.<\/li>\n
          • Child, Container\u00a0are the two parameters used in this method.<\/li>\n<\/ul>\n

            Syntax<\/strong>:<\/p>\n

            <\/p>\n

            hydrate ()<\/h4>\n

            \n
            • It is equivalent to the render () method, but is implemented while using server-side rendering.<\/li>\n
            • Element, Container, Callback are the three parameters used in this method.<\/li>\n<\/ul>\n

              Syntax<\/strong>:<\/p>\n

              <\/p>\n

              \n","protected":false},"excerpt":{"rendered":"

              It is an object which exposes a number of top level APIs to interact with the browser DOM. It 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. Most of your components should not need to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[16542],"tags":[16662,16737,16738,16735,16739,16736,16734,16733,16731,16732,16654,16655,16743,16740,16741,16726,16744,16745,16659,16742],"class_list":["post-3994","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-advantages-of-virtual-dom-in-react","tag-finddomnode","tag-import-react-dom","tag-react-dom-full-form","tag-react-dom-install","tag-react-dom-npm","tag-react-router-dom","tag-react-vs-reactdom","tag-reactdom","tag-rendering-elements","tag-virtual-dom","tag-virtual-dom-in-react","tag-what-is-dom-in-react-native","tag-what-is-react-dom","tag-what-is-react-dom-server","tag-what-is-react-router-dom","tag-what-is-real-dom-in-react-js","tag-what-is-the-difference-between-react-router-and-react-router-dom","tag-what-is-virtual-dom-in-react","tag-what-is-virtual-dom-in-react-native"],"yoast_head":"\n