What Are the Potential Threats In Unmounting Using UseEffect Hook?

In2021, I can say many developers are loving the functional components implementation with the help of hooks.

Recently in one of my projects, while implementing Unmount lifecycle method using useEffect, we faced issue like our unmount (return function inside useEffect) was getting executed whereas component was still in mounted phase. While solving it I got few new learnings which I believe many people might not be aware of.

let’s begin,

useEffect
If you’re familiar with React class lifecycle methods, you can think of useEffectHook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

function useEffect(effect: EffectCallback, deps?: DependencyList): void;

useEffect accepts two parameters, First as callback function which executes at time of mounting. Second is dependency array, If provided, it executes a callback function if any of the value from dependency array is modified.

Let’s understand the typical usage of useEffect from the above code snippet.

• Api call for fetching data from server and saving it over reducer (componentDidMount).
• Having dependency of filter (componentDidUpdate).
• On unmount clear the reducer (componentWillUnmount).

Assumption We assume like resetUserAction will be only dispatched when the component is unmounted right ??? That’s not the case.

Let me walk you through the exact problem statement.

I was dispatching an action on-mount which was listened to by Reducer (for turning on spinner) and by Saga (for calling an Api on success/failure and updating the reducer). Lets see the actual code for getting better arms on it.

Let’s dry run the above code.

useEffect executes the callback function passed to it on initial mount and on every update i.e if any value from dependency array is updated e.g if filter is updated with actual filter value then it will re-execute the useEffect as well as componentWillUnmount i.e it will run the side-effect for clearing it.

Conclusion If we have a dependency array provided as dependency to useEffect then in that case useEffect will re-execute, If values from dependency array are updated as well as it will execute componentWillUnmount for clearing sideEffects.

useEffect with dependency array will run a returned function from it for clearing side-effects.

Useeffect having a dependency array empty will run the returned function as componentWillUnmount.

Now it will run as expected only when the component is unmounted then only it will run the componentWillUnmount i.e will execute the return function defined inside new useEffect.

I faced a similar issue and spent some quality time understanding this flow. So I thought of sharing. Be careful while using useEffectwith dependency array.

If you find this useful please share with your colleagues/friends and please take a moment to provide your feedback in the form of comments below.

Summary: 

Since we faced such difficulty while using useEffect with dependency array and we spent quality time to find the root cause of it, therefore, in this article, we shared a few of our approaches to preventing such an event.