What is Mounting in React: Explanation and Example

In React, mounting is the process when a component is created and inserted into the DOM for the first time. It happens once when the component appears on the screen, allowing React to set up the component and display its content.

How It Works

Imagine you have a new plant pot and you want to place a plant inside it for the first time. Mounting in React is like putting that plant into the pot and placing it on your windowsill. The component is created and added to the webpage's structure (the DOM) so users can see it.

When React mounts a component, it builds the component's structure, runs any setup code, and shows the content on the screen. This happens only once for each component instance, right when it first appears.

After mounting, the component can update or be removed, but mounting is specifically about the first time it shows up.

Example

This example shows a simple React functional component that mounts and displays a message. When the component appears, React runs the code inside useEffect with an empty dependency array, which runs only once on mounting.

javascript

import React, { useEffect } from 'react';

function Welcome() {
  useEffect(() => {
    console.log('Component mounted');
  }, []);

  return <h1>Hello, welcome to React mounting!</h1>;
}

export default Welcome;

Output

Hello, welcome to React mounting!

When to Use

You use mounting when you want to run code or show content only once when a component first appears. For example:

• Loading data from a server when a page or component loads.
• Setting up event listeners or timers.
• Initializing animations or UI effects.

Mounting is important for preparing your component to work correctly before the user interacts with it.

Key Points

• Mounting is the first time a React component is added to the DOM.
• It happens once per component instance.
• Use useEffect with an empty array to run code on mounting in functional components.
• Mounting prepares the component to be visible and interactive.

Key Takeaways

Mounting is when React creates and inserts a component into the DOM for the first time.

It happens only once per component instance, right when it appears on screen.

Use the useEffect hook with an empty dependency array to run code on mounting.

Mounting is useful for loading data, setting up listeners, or initializing UI.

Understanding mounting helps you control when your component starts working.