usepromise-withargs

function usePromise(promise, args) {
  const [results, setResults] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isCurrent = true;

    promise(...args)
      .then((payload) => {
        if (!isCurrent) return;
        setResults(payload);
      })
      .catch((error) => {
        if (!isCurrent) return;
        setError(error);
      });
    return () => (isCurrent = false);
  }, [promise, args]);

  return { results, error };
}

function SomeProductComponent() {
  const [getProductArgs, setGetProductArgs] = useState([1]);
  const { results: product, error: productError } = usePromise(api.products.getProduct, getProductArgs);

  if (productError) {
    console.error('productError:', productError);
  }

  // Simulate an Error, which sets 'error'
  useEffect(() => {
    setTimeout(() => setGetProductArgs([`<productId that doesn't exist>`]), 2000);
  }, []);

  if (!product) return <div>Loading...</div>;

  return <div>{JSON.stringify(product)}</div>;
}