Unmounting functional components in React

July 3, 2023

I am new to React. I am trying out an exercise. In my app I have a button that toggles the appearance of a black box. I want the onBlackBoxUnmount function to be executed when the BackBox component is unmounted. However, I notice that it is executed every time I click the button. What does this happen.

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

function MouseContainer() {
  const [seeBox, setSeeBox] = useState(true);
  return (
    <>
      <button onClick={() => setSeeBox(!seeBox)}>Toggle Black Box</button>
      {seeBox && <BlackBox></BlackBox>}
    </>
  );
}

function BlackBox() {
  const onBackBoxUnmount = () => {
    console.log("clean up code ...");
  };
  useEffect(() => {
    return onBackBoxUnmount;
  });
  return (
    <div style={{ backgroundColor: "black", height: 100, width: 100 }}></div>
  );
}

export default MouseContainer;

>Solution :

You set it up right!
It will be executed everytime you unmount your component.
But as you said, even when seeBox is FALSE so I don’t think the problem is the component but React StrictMode.
Docs