Lazy loading.

Implement Lazy loading

1. lazy()

2. < Suspense >

Step 1:
We don't use the traditional import approach when we import those two components(about contact). Rather, we'll do something like this:

//app.js
import React, { lazy} from "react";

❌import About from "./components/About";
❌import Contact from "./components/Contact";

✅const About = lazy(() => import("./components/About"));
✅const Contact = lazy(() => import("./components/Contact"));

Step 2:
<Suspense> lets you display a fallback until its children have finished loading. If you don't use it then react will throw you an error. Wherever we invoke a lazy loading component, we must wrap that into <Suspense> Just like this:

<Suspense fallback={"Loading..."}>
  <About />
</Suspense>