Top-level Suspense components

Lazy components need to be rendered inside of a Suspense component. They do not have to be direct children of Suspense though, which is important because this means that you can have one Suspense component handle every lazy component in your app. Let's illustrate this concept with an example. Here's a component that we would like to bundle separately and use lazily:

import React from "react";

export default function MyFeature() {
  return <p>My Feature</p>;
}

Next, let's make the MyFeature component lazy and render it inside of a MyPage component:

import React, { Fragment, lazy } from "react";

const MyFeature = lazy(() => import("./MyFeature"));

export default function MyPage() {
  return (
    <Fragment>
      <h1>My Page</h1>
      <MyFeature />
    </Fragment>
  );
}

Here, we're using the lazy() API to make the MyFeature component lazy. This means that when the MyPage component...