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?
componentDidMount() and componentWillMount()
In React, components you work with can both be represented as React nodes and DOM nodes.
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:
let foo = React.createElement(FooComponent);
So what is
foo and what can you do with it?
foo, at the moment, is an instance of a
FooComponent React type. 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.
If you were to call
React.findDOMNode(foo) you would get a falsy object back. Why?
foo doesn’t have a DOM representation because it currently doesn’t need to exist anywhere in the DOM tree.
But, once you attempt to mount a React element node in the document, you will trigger the component lifecycle which will create a suitable managed DOM node:
From this point,
foo is no longer just a React node. It has an associated DOM node and is now a first-class citizen in the document. You can now find it as an actual DOM node somewhere in the tree and interact with it as you would with other DOM elements: compute it’s height, width, apply other styles, pass it to
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
componentWillRender would be much better names.
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.
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).
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:
Which are likely the most common functions React uses to mount internally.
componentWillMount === before-mount
componentDidMount === after-mount
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.