In my recent experience interviewing Frontend Engineer candidates, I noticed a recurring challenge that I think many developers face. When asked to maintain a child component's state while the parent re-renders, several candidates struggled - not because they lacked technical skills, but because of a common point of confusion in React: the distinction between Mounting and Rendering.
This is a fundamental concept that often gets glossed over in tutorials, yet it's crucial for building efficient React applications. Let's break down these concepts clearly with practical examples.
<aside> 💡
This article was mostly inspired by the new version of React - 19.2 that features the <Activity> component that will be super useful for most applications and I plan on cover it as well in the upcoming articles
</aside>
Mounting is the process of creating a component and inserting it into the DOM. This happens when a component is first initialized and added to the UI.
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// Runs after the initial render (in dev StrictMode it may appear twice).
console.log('Component has mounted!');
return () => {
// Runs before the next effect run and on unmount.
console.log('Component will unmount!');
};
}, []); // Empty deps => runs after first render; cleanup runs on unmount
return <div>Hello, I'm mounted!</div>;
}
In React 18+ StrictMode, React intentionally mounts, unmounts, and mounts again in development to detect side-effect issues. Don’t rely on the number of effect runs in dev as evidence of multiple real mounts in production.
Unmounting is the process of removing a component from the DOM. This happens when the component is no longer needed or when the user navigates away.
<aside> 💡
Important note: When a component unmounts and remounts, it loses all its state. Any data stored in useState or other hooks will be reset to their initial values.
</aside>
During mounting, React creates a virtual DOM representation of your component tree. The virtual DOM is a lightweight JavaScript object that mirrors the real DOM structure. After creating this virtual representation, React then builds the actual DOM elements and inserts them into the document. This initial mount is more expensive because it involves creating all the DOM nodes from scratch.