react-preload-example.js

import React from 'react';

let DataContext = React.createContext();

// A higher-order component for pairing preload function + component ...
function withData(preloadData, Component, autoPreloadOnRender = true) {
  let needsPreload = !!autoPreloadOnRender;

  let promise;
  let value;
  let error;

  function preload() {
    needsPreload = false;

    if (promise == null) {
      promise = preloadData();
      promise.then(
        v => {
          promise = null;
          value = v;
        },
        e => {
          promise = null;
          error = e;
        }
      );
    }

    return promise;
  }

  function Data(props) {
    if (needsPreload) {
      // Go ahead and kickoff preloading here if nobody did it yet.
      preload();
    }

    return (
      <DataContext.Provider value={{ promise, value, error }}>
        <Component {...props} />
      </DataContext.Provider>
    );
  }

  Data.preload = preload;

  return Data;
}

// ... and a hook to retrieve the result of the fetch or trigger suspense.
function useData() {
  let { promise, value, error } = React.useContext(DataContext);

  if (error) {
    throw error;
  }

  if (promise) {
    throw promise; // trigger suspense
  }

  return value;
}

// Use it:

let UserProfile = withData(
  () => fetchUser('mjackson'),
  () => {
    let user = useData();
    return <p>Hello, {user.name}</p>;
  }
);

function fetchUser(name) {
  return new Promise(accept => {
    accept({ name });
  });
}