What could be causing redux state load delay?

Question

I have a simple placeholder component that just displays a loading screen. But in the background, it's making checks to be redirected to the correct path. Using react-redux I can select a property in my state.

  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
  console.log(isAuthenticated)
    useEffect(() => {
        if (isAuthenticated) {
          history.push("/home");
        } else {
          history.push("/login");
        }
      }, [isAuthenticated, history]);

   return (
       <Spin size="large" />
   );

//Redux store config

const configureStore = (persistedState) => {
  const store = createStore(
    rootReducer,
    persistedState,
    applyMiddleware(thunkMiddleware)
  );
  store.dispatch(validateAuth());
  return store;
};

But when I check the console the output below shows it might be loading the initial state then the updated state. What could be causing this delay? As it is always redirecting to /login

Answer 1

  useEffect(() => {
    const timer = setTimeout(() => {
      if (isAuthenticated) {
        console.log("I'm here")
      } else {
        history.push("/login");
      }
    }, 1000);
    return () => clearTimeout(timer);
  }, [isAuthenticated, history]);

I decided to wrap my useEffect action in a timeout to wait for the correct state to be loaded. If this is incorrect or not the best practice please let me know a better answer.