An example of compositing useState and useEffect hooks

hooks.js

import { useState, useEffect } from 'react';
import xFetch from '../utils/x_fetch';

export const useFetch = (url) => {
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    setIsLoading(true);
    xFetch(url)
      .then(response => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error(response.statusText);
        }
      })
      .then(json => setData(json))
      .catch(error => setError(error))
      .then(() => setIsLoading(false));
  }, [url]);

  return { data, isLoading, error };
};

usage.js

import React from 'react';
import { useFetch } from './hooks';
import RecommendationsList from './RecommendationsList';
import Loader from 'components/loader';

const RecommendationsListContainer = () => {
  const { data: recommendations, isLoading } = useFetch('/recommendations.json');

  return (
    <React.Fragment>
    {isLoading ?
      <Loader />
     :
      <RecommendationsList recommendations={recommendations} />
    }
    </React.Fragment>
  );
};

export default RecommendationsListContainer;

Notes:

• xFetch is our own Fetch implementation which injects Rails-specific CSRF tokens; other than that it uses the standard Fetch API