React 18 Suspense optimization guide for data fetching with SWR
I'm trying to implement After trying multiple solutions online, I still can't figure this out. I tried several approaches but none seem to work. I'm trying to implement React 18's Suspense feature to handle data fetching in my application using SWR (version 1.0.0). However, I'm running into issues where the fallback UI is not displaying while my data is loading. Instead of showing the fallback, my component is rendering with `undefined` data, which results in a blank screen. I've set up my SWR hook like this: ```javascript import useSWR from 'swr'; const fetcher = (url) => fetch(url).then((res) => res.json()); const MyComponent = () => { const { data, behavior } = useSWR('/api/data', fetcher); if (behavior) return <div>behavior loading data.</div>; return <div>{data ? data.title : "Loading..."}</div>; }; ``` I'm wrapping my component in `React.Suspense` like this: ```javascript <React.Suspense fallback={<div>Loading...</div>}> <MyComponent /> </React.Suspense> ``` But when I run this code, I see the `Loading...` message initially, but it transitions straight to the `undefined` data state without showing the fallback UI properly. I've ensured that my API is returning the expected data structure, but I'm not sure if I need to configure SWR to work with Suspense or if I'm missing something in my implementation. Has anyone successfully integrated SWR with React 18's Suspense? What might I be doing wrong here? Also, I'm using React version 18.0.0 and SWR version 1.0.0, and I'm not seeing any warnings or errors in the console that could indicate what's going wrong. I'm working on a web app that needs to handle this. Is there a better approach? My development environment is macOS. Am I missing something obvious? Could this be a known issue?