Infinite loop when fetching data with `useAsync()`

[jb]

I'm using client routing in vps, and when switching to a page that has a component with useAsync(), I can see in useSsrData, that (obviously) it creates a new key that is different than the initial key created at first load(server side).

Thus, the data in the html tree is never found, then creates a new promise, throws the state, that triggers the update of suspense, which triggers the update of the wrapped component, and so there's an infinite loop... :

UseAsync client side if id has not been created server side

1. Creates new ID
2. Id not found
3. New promise
4. Update promise State 'pending'
5. Result: Component unmount/mount
6. Go back to 1

I think the documentation should make it clear, that useAsync only works when you are coming from the server, so only for server routing, otherwise only useSSRData is indicated with a static id.

• git clone [e-mail]:jaybe78/vps-webpack5-redux-streaming-test.git
• npm install
• npm run dev

Screen.Recording.2022-06-02.at.00.08.52.mov

Steps:

1. Click on About
2. Go back to Home
3. Result: infinite loop

I tried with react-router as well using the example you added in vite-plugin-ssr. I get the same issue this time on first load. https://github.com/jaybe78/vps-webpack5-redux-streaming-test/pull/1/files

Though I confirm in both cases it works, if I replace

const movies = useAsync(async () => {
    const response = await fetch(
      "https://star-wars.brillout.com/api/films.json"
    );
    return response.json();
  });

by

const movies = useSsrData('movies', async () => {
    const response = await fetch(
      "https://star-wars.brillout.com/api/films.json"
    );
    return response.json();
  });

[Rom]

It should actually work with Client Routing.

Reproduction is welcome and I'll have a look.

[jb]

@brillout Done ! Thanks

[Rom]

I could reproduce, I'll have a look at it tomorrow.

[Rom]

It's a React bug: facebook/react#24669.

[jb]

Oh sh*t! . I guess I'll stick to static id for now.
Thanks @brillout.