lib.js

export function useResource(fn, input) {
  return useMemo(() => {
    let resource = { type: 'Pending', value: null };
    resource.value = Promise.resolve(fn(...input))
      .then(result => Object.assign(resource, { type: 'Resolved', value: result }))
      .catch(error => Object.assign(resource, { type: 'Rejected', value: error }));
    return resource;
  }, input);
}

export function useValueOf(resource) {
  return useMemo(() => {
    switch (resource.type) {
      case 'Pending':
        let suspender = resource.value;
        throw suspender;
      case 'Rejected':
        let error = resource.value;
        throw error;
      case 'Resolved':
      default:
        let result = resource.value;
        return result;
    }
  }, [resource]);
}

usage.js

async function fetchUser(id) { return fetch(); }

function Parent() {
  let resource = useResource(fetchUser, [id]);
  return (
    <Suspense fallback={<span>loading…</span>}>
      <Child resource={resource} />
    </Suspense>
  )
}

function Child({ resource }) {
  let data = useValueOf(resource);
  return <JSX />;
}