What is “Mounting” in React js?

by

The main job of React is to figure out how to modify the DOM to match what the components want to be rendered on the screen.

React does so by “mounting” (adding nodes to the DOM), “unmounting” (removing them from the DOM), and “updating” (making changes to nodes already in the DOM).

How a React node is represented as a DOM node and where and when it appears in the DOM tree is managed by the top-level API. To get a better idea about what’s going on, look at the most simple example possible:

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

So what is foo and what can you do with it? foo, at the moment, is a plain JavaScript object that looks roughly like this (simplified):

{
  type: FooComponent,
  props: {}
}

It’s currently not anywhere on the page, i.e. it is not a DOM element, doesn’t exist anywhere in the DOM tree and, aside from being React element node, has no other meaningful representation in the document. It just tells React what needs to be on the screen if this React element gets rendered. It is not “mounted” yet.

You can tell React to “mount” it into a DOM container by calling:

ReactDOM.render(foo, domContainer);

This tells React it’s time to show foo on the page. React will create an instance of the FooComponent class and call its render method. Let’s say it renders a <div />, in that case React will create a div DOM node for it, and insert it into the DOM container.

This process of creating instances and DOM nodes corresponding to React components, and inserting them into the DOM, is called mounting.

Note that normally you’d only call ReactDOM.render() to mount the root component(s). You don’t need to manually “mount” the child components. Every time a parent component calls setState(), and its render method says a particular child should be rendered for the first time, React will automatically “mount” this child into its parent.

More Related Contents:

  1. Build an HTML table using React from arrays [closed]
  2. Why can’t I directly modify a component’s state, really?
  3. “SyntaxError: Unexpected token < in JSON at position 0"
  4. How to delete an item from state array?
  5. ReactJS – Does render get called any time “setState” is called?
  6. How can I use multiple refs for an array of elements with hooks?
  7. console log the state after using useState doesn’t return the current value [duplicate]
  8. React onClick function fires on render
  9. React Js conditionally applying class attributes
  10. How to access a child’s state in React
  11. ESLint Parsing error: Unexpected token
  12. Is there any way to update a specific index from the array in Firestore
  13. Is there a synchronous alternative of setState() in Reactjs
  14. How to add custom html attributes in JSX
  15. ES6 array map doesn’t return anything: ReactJS
  16. Why React Hook useState uses const and not let
  17. When is it appropriate to use a constructor in REACT?
  18. Use Async/Await with Axios in React.js
  19. How to prevent re-rendering of components that have not changed?
  20. How target DOM with react useRef in map
  21. In ReactJS, why does `setState` behave differently when called synchronously?
  22. Adding a new line in a JSX string inside a paragraph – React
  23. How can I update an object inside of an array in firestore? [duplicate]
  24. React.js Serverside rendering and Event Handlers
  25. using history with react-router-dom v6
  26. Only numbers. Input number in React
  27. Disable chrome react DevTools for production
  28. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  29. How can I redirect in React Router v6?
  30. Firebase-Admin, importing it to react application throws Module not found error

Leave a Comment