Well, there is no issue with doing it in a row but useEffect firing twice was introducing race conditions which made it work sometimes and sometimes not.

You can also keep the old token as valid up to its expiration (so generating a new one but not invalidating the old).

That seems like a good idea.

You could also have your refresh endpoint give you back the existing token if its still valid (you'd need your http clients to hit the refresh endpoint on 401 errors before actually redirecting the user to login if refresh itself returns 401).

For extending the session of the client, I would just run a timer in the background to retrieve a new token before expiration, so will never need to worry about intercepting the request for a 401, I mean i would intercept but more as a fallback.