Debugging React setState error

Question

I am not obviously setting state in any of my components constructors or the like yet i am getting the

Warning: setState(...): Can only update a mounted or mounting component

error. Is there any good way to debug this and figure out where exactly this is happening? I suspect it happens somewhere in a router redirect but I'm just not sure.

Here's said redirect

<Route exact path='/login' render={() => authStore.isLoggedIn ? <Redirect to='/protected'/> : <Login/>}/>

Ideas on how to debug this error?

Answer 1

Ok, I found the problem by examining / expanding my consoles' stack trace, narrowing it down to a specific component at which point the culprit was more obvious.

The problem was that I had a setState inside a promise that was being fired After my redirect happened (as shown in my original question). The <Login/> component was being removed from the DOM right before I was flipping a fetching: true / false state switch.

I feel like there's a better way to track setStates / re-renders for debugging. If anyone has a suggestion for a pattern / dev-tool (i'm aware of the react-dev-tools) that helps in these sort of issues please let me know!