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

app/.wasp/out/web-app/src/index.tsx

with

React.StrictMode

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
)

Wasp•9mo ago•

5 replies

Elliot_bai

React.StrictMode Causes Duplicate API Requests in Production

Problem

Root Cause

Wasp generates

app/.wasp/out/web-app/src/index.tsx

app/.wasp/out/web-app/src/index.tsx

with

React.StrictMode

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
)

React.StrictMode Causes Duplicate API Requests in Production

React.StrictMode Causes Duplicate API Requests in Production

Problem

Root Cause

Evidence

Solution

Similar Threads

React.StrictMode Causes Duplicate API Requests in Production

React.StrictMode Causes Duplicate API Requests in Production

Problem

Root Cause

Evidence

Solution

Similar Threads

Similar Threads

Similar Threads