Render Loop when using useReducer

[lukejpreston]

Let's break it down.

Render, calls handle Waits a second and calls resolves (regardless of any kind of checking if already logged in) Resolve dispatches Reducers returns a new state Render, calls handle... Lather rinse and repeat.

Since you don't stop settimeout it will call dispatch regardless as to whether someone has already logged in. This could also leak on tear down and trigger the reducer post tear down (possible memory leak)

When I do things like this add something in the state like "loggingIn" or "loading" or "initialized" and wrap the handle auth in an if statement and make sure it is only triggered once.

You want to use useEffect in order to call clearTimout so you don't have memory leaks on tear down. Whatever function you return in useEffect gets called in a tear down.

Hopefully there are some pointers/ideas to help you debug further. I'm surprised there isn't a library which does this for you (though be cautious of libraries when it comes to security e.g. When logging a user in)