HMR causes infinite render loop with nested Awaits

[lsthornt]

Reproduction

1. Visit this StackBlitz
2. Open developer console while Stackblitz loads (you will be observing console)
3. Once Stackblitz loads its browser, make any chance to a project file to trigger HMR
4. Observe: render count is incremented infinitely in the console

System Info

From Stackblitz --

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @remix-run/dev: * => 2.10.2 
    @remix-run/node: * => 2.10.2 
    @remix-run/react: * => 2.10.2 
    @remix-run/serve: * => 2.10.2 
    vite: ^5.1.0 => 5.3.3

Used Package Manager

npm

Expected Behavior

• The innerData promise destructured from useLoaderData is stable, and therefore memoizes correctly
• innerContentPromise should be calculated once, returning its own stable promise
• InnerComponent should await innerContentPromise and stop rendering once it has resolved

Actual Behavior

An HMR causes innerComponent to re-render infinitely

[lsthornt]

Repeatedly running into this, and having to find workarounds.

In digging around, it does feel related to #7809 and #7392 (useMemo not working as expected deferred loader data)