How to get state data just after setting it

[shellking4]

I have a use case in my nextjs, which reads like this:
When the user logs in the app, I get user specific data then I set the state with those data.

I have this setup:

const useAuthStore = create<AuthState>()(
    devtools(
        persist((set) => ({
            authUser: {},
            setAuthUser: (user: any) => set(() => ({ authUser: user }), true),
            clear: async () => { await localforage.clear() }
        }),
        {
            name: "auth-storage",
            getStorage: () => localforage as any
        }),
    )
)

And this function that is called on auth success to set the data

const setAuthData = (authData: any) => {
        useAuthStore.getState().setAuthUser(authData.user);
}

To protect routes in the application I have this high order component

const RouteGuard = (props: any) => {
    const router = useRouter();
    const [authorized, setAuthorized] = useState(false);
    const authUser = useAuthStore(state => state.authUser)
    
    useEffect(() => {
        authCheck(router.asPath);
        const hideContent = () => {
            setAuthorized(false);
        };
        router.events.on('routeChangeComplete', authCheck)
        return () => {
            router.events.off('routeChangeStart', hideContent);
            router.events.off('routeChangeComplete', authCheck);
        }
    }, []);
    
    const authCheck = (url: string) => {
        let userIsLoggedIn = false;
        userIsLoggedIn = (authUser as any).email !== undefined;
        if (!userIsLoggedIn && !publicPaths.includes(url)) {
            setAuthorized(false);
            router.replace("/admin/login");
        } else {
            setAuthorized(true);
        }
    }
    
    return (authorized && props.children);
}

So in this component I check if the user data are present in the state, if not I want not to allow access to the route.

The issue I have is that after the authentication, the check keeps returning me back to login as if the data were not present in the store. How can I solve this ? Seems there is a delay between setting the state and the data availability in the app. How to go around this please ? Thanks for any help

[dai-shi]

You can read the store value directly in a callback. useAuthStore.getState().authUser
That said, deriving the global state to a local state seems like a bad practice. You should avoid the useState there.

[shellking4]

Thank you very much @dai-shi. It works now. Maybe I'll dig deeper and find a way not to derive the global state to the local state.

[tylerrrkd]

so convenient