State inside Route Context

[Walter-Sparrow]

Is there any way to have a state inside the Route Context? I have tried using it as React Context but changing a state with setState does not trigger rerender of child route (because it has the old value).

Example (Context setup):

export default function App() {
  const [language, setLanguage] = useState<"nl" | "en">("nl");

  const switchLanguage = () => {
    setLanguage((lng) => {
      const newLng = lng === "nl" ? "en" : "nl";
      i18n.changeLanguage(newLng);

      return newLng;
    });
  };

  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider
        router={router}
        context={{
          language: {
            current: language,
            switch: switchLanguage,
          },
        }}
      />
    </QueryClientProvider>
  );
}

Component that will trigger the change:

export function LocaleSwitcher() {
  const { language } = rootRoute.useRouteContext();

  return <Button onClick={() => language.switch()}>switch</Button>;
}

Root route where I expect the state change:

export function Root() {
  const { language } = rootRoute.useRouteContext();

  return (
    <ConfigProvider locale={language.current === "en" ? enUS : nlNL}>
      <Layout>
        <Layout.Header className={styles.Header}>
          Header <LocaleSwitcher />
        </Layout.Header>
        <Layout.Content className={styles.Content}>
          <Outlet />
        </Layout.Content>
      </Layout>
    </ConfigProvider>
  );
}

[universse]

maybe router.invalidate helps. see https://tanstack.com/router/v1/docs/guide/data-mutations#invalidating-tanstack-router-after-a-mutation

[leovigna]

Had same issue and this fixed it! You have to call router.invalidate when the context changes.
One pattern I've used is combining with a useEffect if that state is reactive to make things simpler in case I forget anywhere.

//some state in my component
const [value, setValue] = useState(0)
//invalidate router when state changes
useEffect(() => router.invalidate(), [value])

return <RouterProvider
        router={router}
        context={{
          value,
          //Idk if this will work though
          setValue
        }}
      />