T
TanStack•2y ago
other-emerald

beforeload with async does not seem to wait or creates infinite rerenders

I create a minimal reproduce ... its the context.hasAccessTo that tries to wait for result but dont get anywhere... https://stackblitz.com/edit/vitejs-vite-uw5gth?file=src%2FApp.tsx I have an app with 156 routes - upgrading from "1.31.6" --> "1.36.3" this ends up with infinte rerender issue ... is it known issue? are there any workarounds?
Mikkel Thorbjørn Andersen
StackBlitz
BeforeLoad reproduction (forked) - StackBlitz
A Vite React TypeScript project based on @tanstack/react-query, @tanstack/react-query-devtools, @tanstack/react-router, @tanstack/router-devtools, @tanstack/router-vite-plugin, react, react-dom, @types/react, @types/react-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @vitejs/plugin-react, eslint, eslint-plugin-react-hooks, es...
3 Replies
other-emerald
other-emeraldOP•2y ago
if I comment this in it will work but why is that needed ? 
 

function App() {
  const { hasAccessTo } = useAccessManagement();
  const hasAccessToRef = useRef(hasAccessTo);

  return (
    <StrictMode>
      <RouterProvider
        context={{
          // WITH THIS LINE it works but why is that needed.
          // hasAccessTo: hasAccessToRef.current,
          hasAccessTo,
        }}
        router={router}
      />
    </StrictMode>
  );
}
 

function App() {
  const { hasAccessTo } = useAccessManagement();
  const hasAccessToRef = useRef(hasAccessTo);

  return (
    <StrictMode>
      <RouterProvider
        context={{
          // WITH THIS LINE it works but why is that needed.
          // hasAccessTo: hasAccessToRef.current,
          hasAccessTo,
        }}
        router={router}
      />
    </StrictMode>
  );
}
future-harlequin
future-harlequin•2y ago
I think the problem is that you pass a function into the context (hasAccessTo), and then use this function in beforeLoad. however, hasAccessTo will be recreated when its deps change, but beforeLoad is already awaiting the function call on the old hasAccessTo
afraid-scarlet
afraid-scarlet•2y ago
ran into something like this and the issues came from not handling thrownerrors properly , i resorted to throwing errors with the path to rediect to in the try block and using the massge in the catch block to throw the redirect with

Did you find this page helpful?