Using state machines in hook-based React components

react-state-machines.jsx

const STATUSES = {
  initial: {},
  fetching: { showLoadingIndicator: true },
  fetched: { showResults: true },
  error: { showError: true },
}

function Foo() {
  const [status, setStatus] = useState(STATUSES.initial)
  const [results, setResults] = useState(null)

  useEffect(() => {
    async function fetchFoos() {
      setStatus(STATUSES.fetching)

      try {
        const foos = await fetch('/foos')
        setResults(foos)
        setStatus(STATUSES.fetched)
      } catch () {
        setStatus(STATUSES.error)
      }
    }
    fetchFoos()
  }, [setStatus, setResults])

  return (
    <div class='foos'>
      {status.showLoadingIndicator && <Loading />}
      {status.showResults && results.map(foo => <span>foo.name</span>)}
      {status.showError && <ErrorMessage>Could not load foos</ErrorMessage>}
    </div>
  )
}