Deferred Mount feature: DeferredMountWithCallback

[marlonicus]

Overview

The DeferredMount component will wait for an initial render before marking the render as complete. This works for simple components, but falls apart for components that load content asynchronously.

This PR introduces a new component and hook to handle those cases: DeferredMountWithCallback and useNotifyMountComplete.

Implementation

Originally, the DeferredMountProvider would loop through a queue of any deferred children and call a trigger function that causes them to render; trying to render as many as possible within a given time budget.

As an addition to this, it will now check to see if that trigger function returns a callback which is then used to pause the processing of the queue until the callback is run.

Example

const DelayedComponent = () => {
  const notifyMountComplete = useNotifyMountComplete()
  const [data, setData] = useState()

  useEffect(() => {
    fetch('mock-api').then((data) => {
      setData(data)
      notifyMountComplete()
    })
  }, [notifyMountComplete])

  return <div>{data}</div>
}

render(
  <DeferredMountProvider>
    <DeferredMountWithCallback>
      <DelayedComponent />
    </DeferredMountWithCallback>
  </DeferredMountProvider>,
  document.getElementById('root'),
)

[creativecreature]

Great description and I really like the test 👍