Unmounting phase in React - Mini Project: Build & Apply

React Component Unmounting Phase

📖 Scenario: You are building a simple React app that shows a message when a component is visible. When the component is removed from the screen, you want to run some cleanup code to log a message.

🎯 Goal: Create a React functional component that displays a message. Add a button to toggle showing or hiding this component. Use the unmounting phase to log a message when the component is removed.

📋 What You'll Learn

Create a React functional component called Message that returns a <div> with the text 'Hello, I am here!'.

Create a state variable called showMessage in the main component to control if Message is shown.

Add a button that toggles showMessage between true and false.

Use useEffect with a cleanup function inside Message to log 'Message component is unmounting' when it is removed.

💡 Why This Matters

🌍 Real World

React components often need to clean up resources like timers or subscriptions when they are removed from the screen to avoid bugs or memory leaks.

💼 Career

Understanding the unmounting phase is essential for React developers to manage component lifecycle and resource cleanup properly.

1

Create the Message component

Create a React functional component called Message that returns a <div> with the text 'Hello, I am here!'.

React

import React from 'react';

// Create Message component here

export default function App() {
  return null;
}

Need a hint?

Define a function named Message that returns a <div> with the exact text.

2

Add state to toggle Message visibility

In the App component, create a state variable called showMessage using useState and set its initial value to true.

React

import React, { useState } from 'react';

function Message() {
  return Hello, I am here!;
}

export default function App() {
  const [showMessage, setShowMessage] = useState(true);
  // Your code here
}

Need a hint?

Import useState and create showMessage with initial value true.

3

Add button to toggle Message display

Inside the App component's return, add a <button> that toggles showMessage between true and false when clicked. Also, conditionally render the Message component only when showMessage is true.

React

import React, { useState } from 'react';

function Message() {
  return Hello, I am here!;
}

export default function App() {
  const [showMessage, setShowMessage] = useState(true);
  return (
    
      {/* Add button and conditional Message here */}
    
  );
}

Need a hint?

Add a button with an onClick that flips showMessage. Render <Message /> only if showMessage is true.

4

Add cleanup in Message unmounting phase

Inside the Message component, use useEffect to add a cleanup function that logs 'Message component is unmounting' when the component is removed from the screen.

React

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

function Message() {
  // Add useEffect with cleanup here
  return Hello, I am here!;
}

export default function App() {
  const [showMessage, setShowMessage] = useState(true);
  return (
    
       setShowMessage(!showMessage)}>
        Toggle Message
      
      {showMessage && }
    
  );
}

Need a hint?

Use useEffect with an empty dependency array and return a cleanup function that logs the message.