Router invalidate and context

We are looking at this one issue where router context gets stale and we need to call

.invalidate

.invalidate

.invalidate

.invalidate to keep it fresh.

Our auth is ran by Clerk so we want to grab the user and auth state whenever the session tokens have been changed.
This setup works but its causing a very annoying "jump to top of page" whenever the context is refreshed. I may have missed something in the docs somewhere so im asking here, has anyone done anything similar or would happen to think of a better approach?

I cant provide a repro but ill share the code for it so if anyone by chance uses Clerk or is willing to try it out they should be able to. This is just a react+vite setup with Clerk react (not using tanstack start)

function App() {
    const user = useUser()
    const authenticated = useAuth()
    const authContext = useMemo(() => {
        return {
            user,
            authenticated,
        }
    }, [
        user,
        authenticated,
    ])

    useEffect(() => {
        router.invalidate()
    }, [authContext])

    return (
        <>
            <RouterProvider router={router} defaultPreload="intent" context={{ auth: authContext }} />
        </>
    )
}

function App() {
    const user = useUser()
    const authenticated = useAuth()
    const authContext = useMemo(() => {
        return {
            user,
            authenticated,
        }
    }, [
        user,
        authenticated,
    ])

    useEffect(() => {
        router.invalidate()
    }, [authContext])

    return (
        <>
            <RouterProvider router={router} defaultPreload="intent" context={{ auth: authContext }} />
        </>
    )
}

function App() {
    const user = useUser()
    const authenticated = useAuth()
    const authContext = useMemo(() => {
        return {
            user,
            authenticated,
        }
    }, [
        user,
        authenticated,
    ])

    useEffect(() => {
        router.invalidate()
    }, [authContext])

    return (
        <>
            <RouterProvider router={router} defaultPreload="intent" context={{ auth: authContext }} />
        </>
    )
}

function App() {
    const user = useUser()
    const authenticated = useAuth()
    const authContext = useMemo(() => {
        return {
            user,
            authenticated,
        }
    }, [
        user,
        authenticated,
    ])

    useEffect(() => {
        router.invalidate()
    }, [authContext])

    return (
        <>
            <RouterProvider router={router} defaultPreload="intent" context={{ auth: authContext }} />
        </>
    )
}

Router invalidate and context

Similar Threads

Similar Threads

Similar Threads