Rendering vs Re-rendering vs Mounting vs Remounting in React
TL;Dr
Mounting
refers to the process when a component is created and inserted into the DOM for the first time.
Unmounting
refers to the process when a component is removed from the DOM (for example, when it is no longer needed or when it is replaced with a different component).
Re-mounting
(or re-mount) happens when a previously unmounted component is mounted again (for example, due to a change in state or props).
Rendering
refers to the process of generating a virtual representation of a component's UI hierarchy. This process occurs on every update, including the first time the component is mounted.
Re-rendering
occurs when a new virtual representation of a component's UI hierarchy is generated due to a change in state or props. This new virtual representation is then used to update the actual UI displayed to the user.
In summary, Mounting
and Unmounting
describe when a component is added or removed from the DOM, while Rendering
and Re-rendering
describe the process of generating and updating the virtual representation of a component's UI hierarchy. **Re-mounting**
is simply when a previously unmounted component is mounted again.
Rendering
Rendering is the process of creating a tree of React elements and converting them into a virtual DOM representation. This process happens when a component is first created or when its state or props change. The virtual DOM is then compared to the previous version, and only the necessary changes are applied to the real DOM.
import React from 'react';
function App() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
export default App;
In the above code, the render
function creates a tree of React elements and returns them. This tree is then converted into a virtual DOM representation and compared to the previous version.
Re-rendering
Re-rendering occurs when a component's state or props change. When this happens, the render
function is called again, and a new tree of React elements is created. This new tree is then compared to the previous virtual DOM representation, and only the necessary changes are applied to the real DOM.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<h1>Count: {count}</h1>
<button onClick={handleClick}>Increment</button>
</div>
);
}
export default Counter;
In the above code, the Counter
component uses the useState
hook to manage its state. When the handleClick
function is called, the count
state is updated, triggering a re-render of the component.
Mounting and Remounting
Mounting is the process of creating a new instance of a component and adding it to the DOM. This happens when a component is first rendered. Remounting occurs when a component is removed from the DOM and then added back again.
import React, { useState, useEffect } from 'react';
function Timer() {
const [time, setTime] = useState(new Date());
useEffect(() => {
const intervalId = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(intervalId);
}, []);
return (
<div>
<h1>Time: {time.toLocaleTimeString()}</h1>
</div>
);
}
export default Timer;
In the above code, the Timer
component uses the useEffect
hook to create an interval that updates the time
state every second. When the component is first mounted, the interval is created. When the component is unmounted and then mounted again, a new instance of the component is created, and a new interval is created.