176

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()

7 Answers 7

215

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.

7
  • 18
    I would like to point out that when you call React.createElement(FooComponent) you are not creating an instance of FooComponent. foo is a virtual DOM representation of FooComponent also known as a React element. But maybe that's what you meant by FooComponent React type. Regardless, you don't mount components in React, you call render which in turn might mount the component if an actual DOM node needs to be created to represent the component in the DOM tree. The actual mounting is the event at which this happens for the first time. Mar 21, 2017 at 5:54
  • 6
    The mounting refers to attaching the React component instance to the DOM node which is necessary to do tree diffing/incremental render updates on subsequent render calls. Mar 21, 2017 at 5:58
  • 6
    I took the liberty of editing this answer because it's already accepted but there were quite a few misconceptions in it (e.g. you can't run findDOMNode on React elements). Jun 10, 2018 at 14:17
  • 1
    @Rahamin unmounting happens when the component is removed/replaced, if you navigate between scenes in such a way that there's no rendering you are not guaranteed an unmount signal. componentWillUnmount is not the same as page unload. Jul 5, 2018 at 12:32
  • 2
    @Yossi here's an example of explicitly mounting and unmounting a component in a test suite: stackoverflow.com/a/55359234/6225838
    – CPHPython
    Mar 26, 2019 at 15:03
58

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.

5
  • 14
    Someone just pointed me to this answer from another forum. I don't think componentDidRender is a substitute for componentDidMount because the component can render multiple times when props change after it's mounted once.
    – Gaurav
    Jan 2, 2016 at 9:46
  • 1
    @TheMinister It was called a "virtual DOM" library because it didn't start out as isomorphic, but actually tied to the DOM from the start. It was an afterthought to make it isomorphic.
    – Claudia
    Jan 22, 2016 at 23:30
  • 1
    So, mount is interchangeable with render? In that case, is it true that a component is mounted/rendered for each of the following hypotheticals?: (id === that.id) ? <Component /> : null | /app/items/:id | this.setState(...).
    – Cody
    Jun 2, 2016 at 17:04
  • 2
    Link to /react-js-the-king-of-universal-apps/ is broken May 23, 2019 at 21:56
  • 1
    I edited the post twice to remove the broken link /react-js-the-king-of-universal-apps/ (with the edit-comments clearly mentioning that it is a broken link), but the peers have rejected the edit both the times. Can someone guide me what's wrong in editing an answer and removing a broken link? Aug 21, 2019 at 11:44
13

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

2
  • 2
    If mounting is similar to appendChild, what is render ?
    – Deke
    Apr 30, 2018 at 0:49
  • 1
    I think you could say render is the actual method that will do the mounting itself. So componentWillMount == before, render == does the DOM insertion, and componentDidMount == after mount (or render has called a DOM API to insert component and that asynchronous operation has fully completed)
    – Rob
    Jul 27, 2019 at 15:12
9

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.

3
  • so mount can be called "placed"?
    – gates
    Jul 22, 2015 at 7:31
  • I would say that the quote is somewhat misleading, as it is only called after the initial render, not on re-renderings caused by updates. Then componentDidUpdate is called instead. Jul 22, 2015 at 8:42
  • +1 for this facebook.github.io/react/docs/…, the description there confirms it is placed ;)
    – gates
    Jul 23, 2015 at 8:23
8

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).

5

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.

0

In React.js, "mounting" refers to the process of creating an instance of a React component and inserting it into the DOM (Document Object Model). When a component is mounted, it means that its lifecycle methods are called, and the component's rendered output is added to the browser's DOM, becoming visible and interactive.

"mounting" is adding nodes to the DOM, "unmounting" is removing them from the DOM, "updating" is making changes to nodes already in the DOM

During the mounting phase in React, the component instance is created, and the lifecycle methods are invoked in a specific order. The rendered output of the component is then inserted into the DOM. Once this process is complete, the component is considered fully mounted and is capable of responding to user interactions.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.