silky-coral•6d ago

Multiple check query

Hello community ! I've setup simple Refine with react-router (HashRouter) app : This is my Routes, used from docs :

<Routes>
  <Route
    element={
      <Authenticated
        key="authenticated-inner"
        fallback={<CatchAllNavigate to="/login" />}
      >
        <Outlet />
      </Authenticated>
    }
  >
    <Route path="*" element={<ErrorComponent />} />
  </Route>
  <Route
    element={
      <Authenticated key="authenticated-outer" fallback={<Outlet />}>
        <NavigateToResource />
      </Authenticated>
    }
  >
    <Route path="/login" element={<Login />} />
  </Route>
</Routes>

<Routes>
  <Route
    element={
      <Authenticated
        key="authenticated-inner"
        fallback={<CatchAllNavigate to="/login" />}
      >
        <Outlet />
      </Authenticated>
    }
  >
    <Route path="*" element={<ErrorComponent />} />
  </Route>
  <Route
    element={
      <Authenticated key="authenticated-outer" fallback={<Outlet />}>
        <NavigateToResource />
      </Authenticated>
    }
  >
    <Route path="/login" element={<Login />} />
  </Route>
</Routes>

I don't understand why, but this simple code run 3 times the check query. My provider is very simple, with just 1 request for auth user. Anyone have already this problem ? Thank you !

3 Replies

kapa.ai•6d ago

Hi @Stéphane. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The behavior you're seeing—where the check method of your authProvider is called multiple times (often 2 or 3 times)—is expected in development mode when using React 18 with <React.StrictMode>. React intentionally double-invokes certain lifecycle methods and effects in development to help identify side effects and potential bugs. This results in hooks like useIsAuthenticated (used internally by <Authenticated>) triggering multiple calls to your authProvider.check method. This is a common question and is documented in the Refine FAQ:

This is the expected behavior if you use <React.StrictMode>. In this mode, React will render the components twice in development mode to identify unsafe life cycles, unexpected side effects, and legacy or deprecated APIs. It's used for highlighting possible problems.
Why are API calls triggering twice?

You will not see this behavior in production builds, as <React.StrictMode> only double-invokes in development. If you want to confirm, you can temporarily remove <React.StrictMode> from your app's entry point and observe that the check method is only called once per mount. This is also confirmed in several GitHub issues where users observed duplicate or triplicate requests, and the Refine team clarified that this is expected in development due to React's strict mode behavior, not a bug in Refine itself [1, 2, 3]. Summary:
You can safely ignore these extra calls during development—they will not occur in production. If you want to avoid them during development, you can remove <React.StrictMode>, but it's generally recommended to keep it for its benefits in catching bugs early. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@647715586129788938> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

silky-coralOP•6d ago

Ok, if i remove React.StrictMode (for try), i've 2 queries again

Multiple check query

Did you find this page helpful?