Disable React.Suspense for Async Selectors

[mrousavy]

Hi all!

I'm using an async selector that fetches a fair amount of data, it takes about 2-4 seconds on my phone. This is called on the app start, and it feels like the entire app freezes because nothing gets rendered during that time.

I tried debugging this to find out what part of Recoil might have performance issues and blocks the entire JS thread, and one thing was particularily interesting to me was: My async selector always returns a value, it's never undefined.

So I browsed the Recoil documentation only to find out that Recoil is designed with React.Suspense in mind, which might be the reason that my entire app looks like it freezes for a few seconds on app launch (and renders nothing).

I wonder if there is a way to not use React.Suspsense, and instead have a defaultValue (of undefined or []) for async selectors?

React.Suspense doesn't work with my current app architecture (React Native)

[drarmstr]

Yes, if you don't want to use Suspense you can use useRecoilStateLoadable(), useRecoilValueLoadable(), and/or noWait(). And manually handle the loading state.

[drarmstr]

Well, the point of the loading state is to be able to propagate it around without having to manually handle it. So, if you want to disable Suspense globally then you don't need to add that logic per-selector and just use something like the wrapper hook alive in your component instead. UseRecoilValueLoadable() will not trigger suspense for that component by returning Loadable instead of type T. The wrapper above would be easier to use by not having to handle Loadable, but would return T | void or T | FallbackType instead.

[mrousavy]

Yes, but it's still hard to maintain. Every single async get in a Selector has to be handled with a noWait (or waitForNone) and returning a fallback type.

[drarmstr]

Only if you specifically want to handle that case for that selector. If your goal is just not use Suspense then you don't need to do anything per-selector and can just use the different hook at the component render.

[CollinMonahanLab49]

So if I have, as follows the docs,

<RecoilRoot>
  <React.Suspense fallback={<LoadingScreen />}>
    <AppOfManyFeatures />
  </React.Suspense>
</RecoilRoot>

Please verify - if any component is waiting a value from Recoil, then the whole AppOfManyFeatures is not rendered.

Can it be more granular than that? Suspense and specifically-designed Loading visuals at the leaves of the component tree?

[drarmstr]

Sure, it can be more granular. Just put a deeper in the tree. A pending hook will bubble up to the closet ancestor component.