Handle Recoil Asynchronous Selectors using Loadables in React

When consuming asynchronous selectors in Recoil, you're going to need to tell React what to render while the API is fetching its data.

One way to solve this issue is by setting a fallback value using React Suspense. But there's another option that gives you fine-grained control, and that's by preventing the selectors from returning a promise in the first place.

In this lesson we're going to have our selectors return Recoil's Loadable object, which always contains the current selector value (contents) and what state the selector is in (state). By consuming this with the useRecoilValueLoadable hook rather than the regular useRecoilValue hook, we can manually define whatever we want React to render in each of the 3 states: hasError, hasValue, and loading.