nextjs - 💡(How to fix) Fix Client UI doesn't update after revalidatePath with Suspense and short promise [1 comments, 2 participants]

Link to the code that reproduces this issue

https://github.com/TomLaVachette/next-short-promise-issue

To Reproduce

1. Clone the repository and run npm install && npm run build && npm run start (⚠️ bug appears only in production mode)
2. Open http://localhost:3000 in your browser
3. Open the browser DevTools console to see client logs, and watch the terminal for server logs
4. Click the "Increment" button (multiple time if needed)
5. Observe the bug: The UI still shows counter: 0 even though:

• Server logs show [Server Component] Rendering Home with counter: 1
• Client logs show [Client Component] Rendering ClientComponent with counter: 1

1. Click the "Toggle" button (which triggers a useState update)
2. Observe: The counter now correctly displays 1

To verify the fix: Comment out the <Suspense><WaitingPromise /></Suspense> block in app/page.tsx (lines 25-27). The counter will now update correctly after clicking "Increment".

https://github.com/user-attachments/assets/10f90744-9b14-471a-8cbc-b5ed91cdb2ea

Current vs. Expected behavior

Current behavior: When a server action calls revalidatePath('/') on a page containing a very short async component (<5ms) wrapped in Suspense, the client UI does not update to reflect the new server state. The console logs prove that:

• The server action completes successfully
• The server re-renders the page with the updated counter value
• The client component receives and logs the new counter value

Yet the DOM is not updated. The UI remains "stuck" showing stale data until any client-side state change (like toggling a useState) forces a re-render.

Expected behavior: After revalidatePath('/') completes, the client UI should update to display the new counter value (e.g., counter: 1) without requiring any manual intervention or client-side state change.

Key observation: The bug only occurs when a short-duration promise (~5ms) exists in a Suspense boundary. Removing the WaitingPromise component resolves the issue.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.1.0: Mon Oct 20 19:33:00 PDT 2025; root:xnu-12377.41.6~2/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 22.16.0
  npm: 11.6.2
  Yarn: N/A
  pnpm: 10.23.0
Relevant Packages:
  next: 16.1.1-canary.1 // Latest available version is detected (16.1.1-canary.1).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure, Loading UI and Streaming, React

Which stage(s) are affected? (Select all that apply)

next start (local)

Additional context

I tested my reproduction against different releases, and the first one that introduced the bug was "v15.4.2-canary.20", since reverting to "v15.4.2-canary.19" works.