W
Wasp•4mo ago
Elliot_bai

React.StrictMode Causes Duplicate API Requests in Production

React.StrictMode Causes Duplicate API Requests in Production Problem All API requests are executed twice in production, causing: - Duplicate database records - Double credit deductions for users - Multiple WebSocket events This only happens in production, not development. Root Cause Wasp generates app/.wasp/out/web-app/src/index.tsx with React.StrictMode enabled in production: 
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>  // ← Should only be in development
    <QueryClientProvider client={queryClient}>
      <WebSocketProvider>
        {router}
      </WebSocketProvider>
    </QueryClientProvider>
  </React.StrictMode>
)
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>  // ← Should only be in development
    <QueryClientProvider client={queryClient}>
      <WebSocketProvider>
        {router}
      </WebSocketProvider>
    </QueryClientProvider>
  </React.StrictMode>
)
Evidence Production logs show duplicate requests:POST /operations/create-generated-request POST /operations/create-generated-request // ← Duplicate Solution StrictMode should only be enabled in development: 
const isDevelopment = process.env.NODE_ENV === 'development'
const app = <QueryClientProvider>...</QueryClientProvider>

ReactDOM.render(
  isDevelopment ? <React.StrictMode>{app}</React.StrictMode> : app
)
const isDevelopment = process.env.NODE_ENV === 'development'
const app = <QueryClientProvider>...</QueryClientProvider>

ReactDOM.render(
  isDevelopment ? <React.StrictMode>{app}</React.StrictMode> : app
)
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @Elliot_bai. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Thank you for your detailed report. Based on the knowledge sources provided, there is evidence that enabling React's StrictMode can cause components to render twice in development, which leads to duplicate API requests—specifically in the context of social auth flows. However, the sources indicate that this double rendering issue is expected in development, not in production. For example, after upgrading to React 18 and enabling StrictMode, the social auth callback page was rendered twice in development, causing duplicate requests, but it was noted that "it would still work in production builds" and the issue was specific to development mode, not production mode [Social login callback page sends the token twice]. There is no explicit information in the knowledge sources confirming that Wasp generates production builds with React.StrictMode enabled, nor that this causes duplicate API requests in production. The sources do not provide details about the generated index.tsx or conditional inclusion of StrictMode based on environment for production builds. Therefore, while your proposed solution is a common best practice in React projects, the knowledge sources do not confirm that this is currently an issue in Wasp's production builds or that Wasp enables StrictMode in production by default. If you are experiencing this issue, it may be worth opening a new issue on the Wasp GitHub repository with your findings, as the current documentation and issues do not address this specific production scenario. If you need to conditionally enable StrictMode based on environment, you may need to manually adjust the generated code or request this feature from the Wasp team, as there is no documented configuration for this in the provided sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Elliot_bai, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
toticozeni
toticozeni•4mo ago
Hey @Elliot_bai, React StrictMode should be enabled only in development, and that is handled by React, not by Wasp. Are you sure you are running your application in production/build environment rather than development one?

Did you find this page helpful?