Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application - useIsMountedRef

 

https://juliangaramendy.dev/blog/use-promise-subscription

React.useEffect(() => {
    let isSubscribed = true;
    fetchBananas()
      .then(bananas => (isSubscribed ? setBananas(bananas) : null))
      .catch(error => (isSubscribed ? setError(error.toString()) : null));

    return () => (isSubscribed = false);
  }, []);




https://juliangaramendy.dev/blog/managing-remote-data-with-swr

https://betterprogramming.pub/why-you-should-be-separating-your-server-cache-from-your-ui-state-1585a9ae8336

https://www.youtube.com/watch?v=oWVW8IqpQ-A

How severe is this warning?

Since this is a warning, it is not a showstopper. But bear in mind that your asynchronous code could potentially cause performance issues or memory leaks.

How can I prevent the issue?

The issue represents a state management design issue in your application. There are many ways to solve state management design issues. Here are a few:

• Develop an “isMounted” workaround to the problem (not recommended)
• Move your state management code up in your component tree
• Use a pub / sub design for state management instead of setState

Develop an “isMounted” workaround to the problem (not recommended)

The React documentation very clearly states that the isMounted workaround is an anti-pattern. There are some documented workarounds such as “making promises cancelable”. But bear in mind that even the suggested workarounds are often hacks that don’t address your application’s design.

Use a pub / sub design for state management instead of setState

Pub / sub state management designs like Redux decouple state management from your component. So instead of your components calling setState, they simply call dispatch, and they also subscribe to your store.

Therefore state is no longer the responsibility of your component, it is the responsibility of something else. In the case of Redux, it becomes a responsibility that is global to your application.

Keep in mind that the Redux useReducer hook also calls setState, so it will not resolve this issue.