useMatchFetch alternative to https://dev.to/joelnet/react-i-really-wish-this-is-how-i-could-write-components-1k4j

1.useMatchFetch.js

import { useState, useEffect } from "react";

export const render = result => match =>
  result.pending ? match.pending()
  : result.error ? match.error(result.error)
  : result.data  ? match.data(result.data)
  : null // prettier-ignore

export const useMatchFetch = url => {
  const [result, setResult] = useState({ pending: true, initial: true });
  const [fetchId, setFetchId] = useState(false)

  useEffect(() => {
    setResult({...result, pending: true})
    fetch(url)
      .then(response => response.json())
      .then(data => setResult({ data, pending: false, initial: false }))
      .catch(error => setResult({ error, pending: false, initial: false }));
  }, [url, fetchId]);
  
  const refetch = () => setFetchId(!fetchId)

  return [result, refetch]
};

2.usage.js

const someComponent = () => {
  const [result, refetch] = useMatchFetch('http://www.google.com')
  
  if (result.error) {
    return <Error error={error} />
  }
  
  if (result.pending && result.initial) {
    return <Loader />
  }
  
  return (
    <div>
      {result.pending && <Spinner />}
      <button onClick={refetch}>Refetch</button>
      {JSON.stringify(result.data, undefined, 2)}
    </div>
  )
}
  
// or, to get the previous behavior use `const renderMatch = render(result); return renderMatch(....)`