React Hook Order Error with Multiple useSWR Hooks in Next.js with Suspense

[LarsFlieger]

Bug report

Description / Observed Behavior

In a Next.js project using SWR with Suspense, an issue arises when more than two useSWR hooks are used within a single component. The errors encountered are:

• Warning: React has detected a change in the order of Hooks called by ComponentExample. This will lead to bugs and errors if not fixed.
  • Uncaught Error: Update hook called on initial render. This is likely a bug in React. Please file an issue.

The issue occurs in Component.tsx, where three fetch operations are initiated using useSWR with suspense: true. The intention is to perform three separate data fetches with delays and console log the outputs.

"use client";

import useSWR from "swr";

const fetchWithDelay = async (url: string) => {
  const delay = parseInt(url) * 1000;
  await new Promise((resolve) => setTimeout(() => resolve(url), delay));
  return url;
};

export const ComponentExample: React.FC = () => {
  const { data: dataAfter1 } = useSWR("1", fetchWithDelay, {
    suspense: true,
  });
  console.log(dataAfter1);

  const { data: dataAfter2 } = useSWR("2", fetchWithDelay, {
    suspense: true,
  });
  console.log(dataAfter2);

  const { data: dataAfter3 } = useSWR("3", fetchWithDelay, {
    suspense: true,
  });
  console.log(dataAfter3);

  return (
    <main>
      <p>Page loaded!</p>
    </main>
  );
};

Expected Behavior

The expectation is that using multiple useSWR hooks in a single component should work seamlessly, particularly when leveraging Suspense in React.

Repro Steps / Code Example

A minimal reproduction of this issue is available in this GitHub repository. The component tries to perform three separate data fetches with a delay function, using SWR with Suspense.

Additional Context

SWR version: ^2.2.4 React version: ^18 Next.js version: 14.0.3

I welcome any feedback or suggestions to fix this problem. If anyone has encountered similar issues or has insights into resolving this, please feel free to contribute. Collaborative efforts to debug and find a solution are highly appreciated.

[Branchverse]

Same problem here! Appreciate a quick fix

[promer94]

duplicate of #2702

[FelixZY]

For future readers: note that #2702 was closed in favor of this issue.

[MatthewAlbrecht]

I'm also running into this. I can use 2 suspended queries with no issues, but adding a 3rd throws these errors.

[yodakaEngineer]

I also encountered this error. I did a little research and it seems that this only reproduces when using the 'use' provided by React. If I always use the 'use' that SWR implements, there seemed to be no problem. https://github.com/vercel/swr/blob/main/src/core/use-swr.ts#L42-L76

@promer94 How about always using the uses implemented by SWR as a tentative solution? Users encountering this bug have not been able to upgrade from version 2.1.5.

[kzmKZuzmo]

hey I have the same problem I have 3 SWR inside the suspend and I get this error.