running beforeLoad only once in layout files

[csenio]

I have

__root.tsx
a.tsx
b.tsx

Inside my __root.tsx file I have a beforeLoad that gets my user info and adds it to context.
However, this beforeLoad file is called every time a user navigates to /a, /b or any other route. I would expect the layouts to work like react components, where only the children "rerender" (or reload) when a user navigates around on the page.

Is there any way to have the app act like that? For most use cases I only need to grab the data in "beforeLoad" once, not every single time my user navigates around on the page...

[isaackoz]

This is also an issue with pre-loading. For example, if you have a sidebar and a user hovers over a link, it will run the beforeLoad fn each time they hover over the link.

My current workaround is by using Promise.withResolvers to get the user info in the InnerApp as described in #1668. In your__root.tsx, you'd do something like

async beforeLoad({ context }) {
    const auth = context.auth;
    // Wait for the auth state to get resolved inside of InnerApp in main.tsx
    await auth.promise;
  },

This way you can do your auth checking logic in the InnerApp like

// main.tsx -> InnerApp
// This only gets called once and persists between navigation (unless you refresh the page)
useEffect(() => {
    const user = getMyUserInfo() // returns User | null 
    auth.resolve(user);
  }, []);

Then for protected routes, you can do the following

// routes/_dashboard/route.tsx
beforeLoad: async ({ context: { auth } }) => {
    const user = await auth.promise;
    if (!user) {
      throw redirect({
        to: "/login",
      });
    }
  },

The beforeLoad still runs on every navigation, but the difference here is that you are only calling out to your API to check the user once in the useEffect. Checking the auth.promise is free and ensures you have the latest status of the user. You could take this further and periodically poll your getMyUserInfo() api every ~60 seconds inside your InnerApp if you want to avoid stale data.

[GraxMonzo]

My workaround for now is to parse the search parameters outside of the router’s context and pass them to the RouterProvider’s context prop.