Defer breaks on hydration error

[MoSattler]

Reproduction

This is a stackblitz where I am forcing a hydration error. As you can see, the deferred data never resolves.
If the hydration error is fixed, deferring starts working again.

https://stackblitz.com/edit/mosattler-remix-repro-defer-search-params-njpsxx?file=app%2Froutes%2F_index.tsx

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 48.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.22 - ~/nevados/dashboard/node_modules/.bin/yarn
    npm: 10.2.3 - ~/nevados/dashboard/node_modules/.bin/npm
    pnpm: 9.1.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.0
  npmPackages:
    @remix-run/dev: 2.9.2 => 2.9.2 
    @remix-run/eslint-config: 2.9.2 => 2.9.2 
    @remix-run/express: 2.9.2 => 2.9.2 
    @remix-run/node: 2.9.2 => 2.9.2 
    @remix-run/react: 2.9.2 => 2.9.2 
    @remix-run/serve: ^2.9.2 => 2.9.2 
    @remix-run/server-runtime: 2.9.2 => 2.9.2 
    @remix-run/testing: 2.9.2 => 2.9.2 
    @remix-run/v1-meta: ^0.1.3 => 0.1.3 
    vite: ^4.5.3 => 4.5.3

Used Package Manager

npm

Expected Behavior

defer should still work, even when hydration errors are happening. They can easily be missed, and sometimes there is nothing a developer can do to prevent them (e.g. the user is using Adblocks)

Actual Behavior

defer breaks on hydration errors

[MoSattler]

Context: #5165 (comment)

The current workaround is to update to the latest React v19. It is currently in RC and should be final soon.

The issue with defer and hydration is that when there are hydration errors, React will re-render the page client-side. This removes the code that Remix uses to process the deferred promise. - @kiliman

[MoSattler]

Would it be possible to make this break more visible and clear, indicating what just happened? Currently, it just stops working without any error, warning, or indication.

[kiliman]

Since the hydration error only occurs on full document requests, perhaps Remix should include something in the initial context to indicate a deferred promise is in process.

If the client re-renders before the promise is resolved, assume something went wrong and revalidate the page. This will trigger the loader again and should work this time as it's now a client navigation.