foo.jsx

import React from 'react'
import Component from "@reach/component-component"

const Fetch = ({ url, props }) => (
  <Component
    url={url}
    initialState={{ data: null }}
    didMount={({ setState }) => {
      fetch(url)
        .then(res => res.json())
        .then(data => setState({ data }));
    }}
    didUpdate={({ prevProps, setState }) => {
      if (prevProps.url !== url) {
        fetch(url)
          .then(res => res.json())
          .then(data => setState({ data }));
      }
    }}
    {...props}
  />
)

export default Fetch