You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
The text was updated successfully, but these errors were encountered:
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:The issue occurs in
Component.tsx
, where three fetch operations are initiated usinguseSWR
withsuspense: true
. The intention is to perform three separate data fetches with delays and console log the outputs.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.
The text was updated successfully, but these errors were encountered: