React Suspense and Error Boundary

ErrorBoundary.js

<ErrorBoundary>
  <ProfileDetails resource={resource}/>
</ErrorBoundary>

LazyComponent.js

// Create dynamic loading component that trigger Suspense while loading.
const LazyComponent = React.lazy(() => import('./Component));

<Suspense fallback={<h1>Loading component</h1>}>
  <LazyComponent>
</Suspense>

ProfilePage.js

function ProfilePage({ resource }) {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails resource={resource} />
      <Suspense fallback={<h1>Loading posts...</h1>}>
        <ProfileTimeline resource={resource} />
      </Suspense>
    </Suspense>
  );
}

React.lazy.js

const Unitialized = -1;
const Pending = 0;
const Resolved = 1;
const Rejected = 2;

function lazy(ctor) {
  // hold component state in closure
  const payload = {
    _status: Unitialized,
    _result: ctor
  }

  return {
    $$typeof: REACT_LAZY_TYPE,
    _payload: payload,
    _init: lazyInitializer
  }
}

function lazyInitalizer(payload) {
  // import when first initialize
  if (payload._status === Uninitialized) {
    const thenable = payload._result();
    // Transition to the Pending state.
    payload._status = Pending,
    payload._result = thenable

    thenable.then(
      // save result to payload
      moduleObject => {
        if (payload._status === Pending) {
          // Transition to the Resolved state.
          payload._status = Resolved
          payload._result = moduleObject.default
        }
      },
      error => {
        if (payload._status === Pending) {
          // Transition to the Rejected state.
          payload._status = Rejected;
          payload._result = error;
        }
      },
    );
  } else if (payload._status === Resolved) {
    // return result when resolved.
    return payload._result;
  } else {
    // throw Promise or Error when status is Pending or Rejected.
    throw payload._result;
  }
}

SuspenseFetch.js

const Unitialized = -1;
const Pending = 0;
const Resolved = 1;
const Rejected = 2;

function suspenseFetch(url) {
  const payload = {
    _status: Unitialized,
    _result: () => fetch(url)
  }

  return () => {
    if (payload._status === Uninitialized) {
      const promise = payload._result()
      payload._status = Pending
      payload._result = promise

      promise.then((res) => {
        if (payload._status === Pending) {
          payload._status = Resolved
          payload._result = res
        }
      }, (err) => {
        if (payload._status === Pending) {
          payload._status = Rejected
          payload._result = err
        }
      })
    } else if (payload._status === Resolved) {
      return payload._result
    } else {
      throw payload._result
    }
  }
}

// in app
const fetchUser = suspenseFetch(`/users/1`)

const User = () => {
  const user = fetchUser()

  return <div>{user.name}</div>
}

const App = () => (
  <Suspense fallback={<h1>Loading user...</h1>}>
    <User>
  </Suspense>
)