Mounting phase in React - Mini Project: Build & Apply

Understanding the Mounting Phase in React

📖 Scenario: You are building a simple React app that shows a welcome message when the component first appears on the screen.This helps you learn how React sets up components when they are added to the page, called the mounting phase.

🎯 Goal: Create a React functional component that displays a welcome message only once when it first appears.You will set up the component, add a state variable, and use the useEffect hook to run code during the mounting phase.

📋 What You'll Learn

Create a functional React component named WelcomeMessage

Use useState to create a state variable called message initialized to an empty string

Use useEffect with an empty dependency array to set message to 'Hello, welcome to the site!' when the component mounts

Render the message inside a <div> element

💡 Why This Matters

🌍 Real World

React components often need to run code when they first appear, like fetching data or setting up subscriptions. This is called the mounting phase.

💼 Career

Understanding the mounting phase is essential for React developers to manage side effects and initialize components properly.

1

Create the React component and import hooks

Create a functional React component named WelcomeMessage. Import useState and useEffect from 'react'. Inside the component, return a <div> with no content yet.

React

import React, { useState, useEffect } from 'react';

function WelcomeMessage() {
  // Your code here
  return ;
}

export default WelcomeMessage;

Need a hint?

Start by importing the hooks and creating a simple component that returns an empty div.

2

Add a state variable called message

Inside the WelcomeMessage component, use useState to create a state variable named message initialized to an empty string ''.

React

import React, { useState, useEffect } from 'react';

function WelcomeMessage() {
  const [message, setMessage] = useState('');
  // Your code here
  return ;
}

export default WelcomeMessage;

Need a hint?

Use const [message, setMessage] = useState('') to create the state variable.

3

Use useEffect to set the welcome message on mount

Inside the WelcomeMessage component, add a useEffect hook with an empty dependency array []. Inside it, call setMessage with the string 'Hello, welcome to the site!'.

React

import React, { useState, useEffect } from 'react';

function WelcomeMessage() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Your code here
  }, []);

  return ;
}

export default WelcomeMessage;

Need a hint?

Remember to pass an empty array as the second argument to useEffect so it runs only once on mount.

4

Render the message inside the <div>

Update the return statement inside WelcomeMessage to render the message state variable inside the <div> element.

React

import React, { useState, useEffect } from 'react';

function WelcomeMessage() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    setMessage('Hello, welcome to the site!');
  }, []);

  return {/* Your code here */};
}

export default WelcomeMessage;

Need a hint?

Use curly braces inside JSX to show the message variable.