React Hook Order Error with Multiple useSWR Hooks in Next.js with Suspense #2849
Description
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.