[React] 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.

<Suspense fallback={<div style={{color: 'red'}}>Loading weather...</div>}>
    <Weather />
</Suspense>

 

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.

 

import React from "react";
import { atom, useRecoilState, selector, useRecoilValueLoadable } from "recoil";
import "./styles.css";
import { fetchWeather } from "./WeatherApi";

const cityAtom = atom({
  key: "city",
  default: ""
});

const weatherSelector = selector({
  key: "weatherSelector",
  get: ({ get }) => {
    const city = get(cityAtom);
    return fetchWeather(city);
  }
});

const Weather = () => {
  const { state, contents } = useRecoilValueLoadable(weatherSelector);

  switch (state) {
    case "hasValue":
      return contents; // val
    case "hasError":
      return contents.message; // error msg
    case "loading":
      return <div style={{color: 'red'}}>Loading weather...</div>;
    default:
      return "";
  }
};

export default function App() {
  const [currentCity, setCurrentCity] = useRecoilState(cityAtom);

  return (
    <div className="App">
      <h2>Enter City:</h2>
      <input
        value={currentCity}
        onChange={(e) => {
          setCurrentCity(e.target.value);
        }}
      />
      <h4>
        <Weather />
      </h4>
    </div>
  );
}