Is it forced to using Await to make React.Suspense's fallback work?

[Toshinaki]

I'm experimenting with new v6 features.
After added some delay to my mock apis, I noticed the page went blank until the loader returns data.

I did some searching and reviewed the docs again. It seems that the only way to make Suspense work is to use Await?
Is that true?

I'm not an expert at js or React, but this seems not very good, IMHO.
I could simply wrap all components with Suspense, and write no code that's not related to the pages' logic.
But now I have to add Await to all the components.

I'm also using react-query to manage server state. Didn't find any docs about combine react-query & loader & Await.

[brophdawg11]

For the initial execution of loaders in the browser, you can show a loading indicator via fallbackElement. The Await/Suspense combination is for Deferred Data.

[brophdawg11]

It's hard to say without a minimal reproduction of the issue.

[MorningLit]

Made a code sandbox, https://codesandbox.io/s/trusting-dhawan-rfmwql?file=/src/Home.js , please let me know if I made any mistakes 🥸

[brophdawg11]

ah, ok, you are getting a promise because you're creating one by using async/await in your useMemo - if you give an async function to useMemo it will return you a Promise. However, data is already resolved there since it's a child of Await so you can just operate on the data directly: https://codesandbox.io/s/youthful-cookies-fsg8c4

However, I think a better approach would be to do this data logic in the loader and keep it out of the UI layer: https://codesandbox.io/s/practical-dewdney-7m6dgx?file=/src/index.js

[MorningLit]

Thanks for the help!
One thing I would like to ask is that how do I get the fallback component to load? My main use case of using the Suspense with react-router-dom is to display a loading component when it is fetching the data, but it is not showing 😢

[brophdawg11]

The usage of defer is outlined in the docs