React Redux double mount with useEffect cleanup of previous component

问题

I'm using react-redux, and I'm trying to clear part of my redux state when a component unmounts, this actually does work, but the problem is that once userProfile is cleared and next component mounts it is unmounted and then mounted again.

useEffect(() => {
    getProfileByUsername(match.params.username, user && user.id);
    return () => clearUserProfile();
  }, [match.params.username])

I can see my clear action is being called before any mount of the next component occurs, but the data is not cleared before the initial mount, so once it does clear, it triggers an unmount and then re-mounts..

I am certain that this is the cause because if I remove the clearUserProfile() cleanup function, it only mounts once.

The other components do not even use userProfile, and I am able to update the state with other actions without re-renders, so I'm not sure why this is happening. I either need a way to prevent this, or to prevent the routing until the action is fully complete. I'm using react-router-dom.

What would be the correct strategy to clear part of my state when a component unmounts?

来源：https://stackoverflow.com/questions/63965292/react-redux-double-mount-with-useeffect-cleanup-of-previous-component