quickest-silver

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

quickest-silverOP•16mo 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>
  );
}

exotic-emerald•16mo 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

quickest-silver•15mo 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

Gaming

Programming

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

Did you find this page helpful?