What is "Mounting" in React js?

Question

I am hearing the term "mount" too many times while learning ReactJS. And there seem to be lifecycle methods and errors regarding this term. What exactly does React mean by mounting?

Examples: componentDidMount() and componentWillMount()

Answer 1

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.

Answer 2

React is an isomorphic/universal framework. That means that there is a virtual representation of the UI component tree, and that is separate from the actual rendering that it outputs in the browser. From the documentation:

React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM.

However, that in-memory representation is not tied directly to the DOM in the browser (even though it is called Virtual DOM, which is an unfortunate and confusing name for an universal apps framework), and it is just a DOM-like data-structure that represents all the UI components hierarchy and additional meta-data. Virtual DOM is just an implementation detail.

"We think the true foundations of React are simply ideas of components and elements: being able to describe what you want to render in a declarative way. These are the pieces shared by all of these different packages. The parts of React specific to certain rendering targets aren't usually what we think of when we think of React." - React js Blog

So, the conclusion is that React is Rendering agnostic, which means that it doesn't care about what is the final output. It can be a DOM Tree in the browser, it can be XML, Native components or JSON.

"As we look at packages like react-native, react-art, react-canvas, and react-three, it's become clear that the beauty and essence of React has nothing to do with browsers or the DOM." - React js Blog

Now, that you know how React works, it is easy to answer your question :)

Mounting is the process of outputting the virtual representation of a component into the final UI representation (e.g. DOM or Native Components).

In a browser that would mean outputting a React Element into an actual DOM element (e.g. an HTML div or li element) in the DOM tree. In a native application that would mean outputting a React element into a native component. You can also write your own renderer and output React components into JSON or XML or even XAML if you have the courage.

So, mounting/unmounting handlers are critical to a React application, because you can only be sure a component is output/rendered when it is mounted. However, the componentDidMount handler is invoked only when rendering to an actual UI representation (DOM or Native Components) but not if you are rendering to an HTML string on the server using renderToString, which makes sense, since the component is not actually mounted until it reaches the browser and executes in it.

And, yes, Mounting is also an unfortunate/confusing name, if you ask me. IMHO componentDidRender and componentWillRender would be much better names.

Answer 3

Mounting refers to the component in React (created DOM nodes) being attached to some part of the document. That's it!

Ignoring React you can think of these two native functions as mounting:

replaceChild

appendChild

Which are likely the most common functions React uses to mount internally.

Think of:

componentWillMount === before-mount

And:

componentDidMount === after-mount

Answer 4

https://facebook.github.io/react/docs/tutorial.html

Here, componentDidMount is a method called automatically by React when a component is rendered.

The concept is that you're telling ReactJS, "please take this thing, this comment box or spinning image or whatever it is I want on the browser page, and go ahead and actually put it on the browser page. When that's done, call my function that I've bound to componentDidMount so I can proceed."

componentWillMount is the opposite. It will fire immediately BEFORE your component renders.

See also here https://facebook.github.io/react/docs/component-specs.html

Finally, the "mount" term seems to be unique to react.js. I don't think it is a general javascript concept, or even a general browser concept.

Answer 5

Mounting refers to the initial page loading when your React component is first rendered. From React documentation for Mounting: componentDidMount:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

You can contrast this with componentDidUpdate function, which is called everytime that React renders (except for the initial mount).

Answer 6

The main goal of React js is to create reusable components. Here, components are the individual parts of a webpage. For example, in a webpage the header is a component, the footer is a component, a toast notification is a component and etc. The term "mount" tells us that these components are loaded or rendered in the DOM. These are many top-level APIs and methods dealing with this.

To make it simple, mounted means the component has been loaded to the DOM and unmounted means the components has been removed from the DOM.