how to execute cleanup function in useEffect() only when component unmounts

Question

I want to clear filters only when the component unmounts. So I wrote cleanup function only in useEffect(). But as I checked it with console.log(), 1 was printed after the component mounted too. What's wrong in this way?

useEffect(() => {
  return () => {
    clearFilters();
    console.log(1);
  };
}, []);

Stack Snippet:

const { useState, useEffect } = React;

const Example = () => {
    useEffect(() => {
        return () => {
            // clearFilters();
            console.log(1);
        };
    }, []);
    return <div>x</div>;
};

const App = () => {
    const [showExample, setShowExample] = useState(false);
    
    return <div>
        <label>
            <input type="checkbox" checked={showExample} onChange={({currentTarget: {checked}}) => setShowExample(checked)} />
            Show <code>Example</code> component
        </label>
        <div>
            {showExample ? <Example /> : null}
        </div>
    </div>;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Here's a more detailed code below

import React, { useEffect } from 'react';
import { useFilterContext } from 'contexts/FilterContext';
import classNames from 'classnames/bind';
import Rating from 'components/Rating/Rating';
import { Button, Form } from 'react-bootstrap';
import styles from './Filter.module.scss';

const cn = classNames.bind(styles);

const Filter = () => {
  const {
    filters: { byAscendingPrice, byStock, byFastDelivery, rating },
    dispatch,
  } = useFilterContext();

  const clearFilters = () => dispatch({ type: 'CLEAR_FILTERS' });
  useEffect(() => {
    return () => clearFilters();
  }, []);

  return (
     // Some components
  );
};

export default Filter;

The `console.log(1)` you have in your `useEffect` example definitely won't get called until the component is unmounted. I've copied your code into a Stack Snippet, and as you can see, `1` doesn't appear until/unless you unmount the `Example` component (and that's true of your more detailled code as well). So there's something missing in your example. Please edit the Stack Snippet with a [mre] of the problem. [More about doing them here](http://meta.stackoverflow.com/questions/338537/). — T.J. Crowder, May 25 '22 at 17:39
@T.J.Crowder Thank you, I found the reason from the answer below. Thanks for the information about minimal example too! — Gianna, May 25 '22 at 17:45

gloo · Accepted Answer · 2022-05-25T17:47:30.593

3

You might be using React's strict mode which simulates unmounting and remounting a component when a component is mounted. This causes double renders in development.

edited May 25 '22 at 17:47

answered May 25 '22 at 17:39

gloo

681
2
12

This was the reason!!! Thanks – Gianna May 25 '22 at 17:43
@gloo - Well spotted! But if this is the problem, it's a duplicate of [this](https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode) a dozen others. When you suspect `StrictMode`, I suggest commenting with a link to one of them rather than answering, because duplicates should be pointed to a canonical original. – T.J. Crowder May 25 '22 at 17:47

score -1 · Answer 2 · answered May 25 '22 at 18:27

This is because of the strict mode. In Strict mode, react may invoke render phase lifecycles multiple times. So it prints 1 on the mounting of the component. But the interesting thing to note here is that it only happens in Development mode, not in Production mode.

Here's the link to read more about React's strict mode: Link

how to execute cleanup function in useEffect() only when component unmounts

2 Answers2