Effect cleanup functions
React performs the cleanup when the component unmounts.
is built in a way that if we return a function within the method,
it gets executed when the component unmounts.
Until React 17,
the useEffect cleanup mechanism used to run during
This implies that when a component is unmounting,
React would execute the cleanup functions and then update the screen.
It is similar to the behavior of
componentWillUnmount in classes.
This is not ideal for larger apps because it slows down large screen transitions (e.g., switching tabs).
In React 17, the useEffect cleanup functions are delayed till the commit phase is completed. In other words, the useEffect cleanup functions run asynchronously - for example, if the component is unmounting, the cleanup runs after the screen has been updated. Additionally, React 17 will always execute all effect cleanup functions (for all components) before it runs any new effects.
Let’s check out a simple example of showing and hiding the fetched users.
When we click on the
Show users button,
it fetches the users through API and displays the user list.
On clicking on
UserInfo component unmounts.
We will be using the Profiler API to measure how the React application renders.
Let’s go through some terms used in Profiler API.
phase(“mount” or “update”): - Identifies whether the component mounted for the first time or is updated.
commitTime(number): - Timestamp when React committed the current update.
Before the changes in React 17, we can see that the cleanup function gets executed and, then the screen gets updated which thereby increases the commit time.
With the changes in React 17, the cleanup function run asynchronously, after the screen gets updated which decreases the commit time.
This change in behavior for cleanup functions has accidentally fixed some issues. One of the issues related to the focus event has been fixed.
We don’t need to worry about fixing the setState warning on the unmounted component -
Warning: Can't call setState (or forceUpdate) on an unmounted component.
React specifically checks for this case
and does not fire
setState warnings in the short gap between unmounting and the cleanup.
So code canceling requests or intervals can almost always stay the same.
Check out the pull request to learn more.