Lazy Loading / Code Splitting

- Lazy Loading Components Asynchronously with `React.lazy()` method &
  `<React.Suspense fallback={<div>Loading...</div>} />` Component

Author: Ch-sriram

README.md

@@ -152,5 +152,6 @@ Required Dependency: **`npm i --save axios`** | **[`axios` DOCS](https://github.
     4. Using `this.props.history.push()/replace()` to Redirect: [Commit Details](https://github.com/Ch-sriram/react/commit/c34bd8846f6916159ef4a6ca58849dab760ae060)
     5. Working with Navigation Guards: [Commit Details](https://github.com/Ch-sriram/react/commit/69cffe5d7ceceae4c7e3d1db90287978c1ea0740)
     6. Handling the **404 Not Found** Case using `path`less `<Route />`: [Commit Details](https://github.com/Ch-sriram/react/commit/643d0c2cc9a19a00207d34ce586c16609e1dae04)
-    7. **Lazy Loading / Code Splitting** 😴 &mdash; 💥Important💥
+    7. **Lazy Loading / Code Splitting** 😴 &mdash; 💥**Important**💥
        1. Loading Routes Lazily Using Asynchronous Dynamic `import()` method inside our own custom-made HOC: [Commit Details](https://github.com/Ch-sriram/react/commit/20387d909c7a69c80736eec746c2d07314314bdc)
+       2. Lazy Loading Components Asynchronously with `React.lazy()` method & `<React.Suspense fallback={<div>Loading...</div>} />` Component: [Commit Details]()

http-ajax-routing/src/containers/Blog/Blog.js

@@ -1,87 +1,40 @@
 // LIBRARY IMPORTS
-import React, { Component } from "react";
+import React, { Component, Suspense } from "react";
 import { Route, NavLink, Switch, Redirect } from 'react-router-dom';
 
 // STYLING IMPORTS
 import "./Blog.css";
 
-/**
- * One concept, which is very important, and easy to implement,
- * is Code Splitting (aka Lazy Loading), where we load routes/
- * components that we don't require all the time, to be loaded
- * when they're required (or when they're requested for by the
- * user).
- * 
- * Without Lazy Loading, what we generally do is, we try to 
- * get the entire `bundle.js` file whenever we request for the
- * webapp. For smaller webapps, loading the entire app makes
- * sense. But if an application is extremely big, in that 
- * scenario, we might want to lazy load certain components 
- * when they're required/requested by the user. Such components
- * in the webapp generally exits for different routes, or 
- * sometimes, at the component level itself. The solution is to
- * lazy load such components/routes entirely, using the new ES6
- * async import() method.
- * 
- * We generally create a HOC inside which we basically pass an
- * component, which would be loaded lazily (asynchronously), 
- * which is the HOC created as a LazyLoader inside the `hoc`
- * directory in our webapp.
- * 
- * For this lazy loading example, we will set the state for 
- * `auth` to true, so that we have access to the "/new-post"
- * route. This "/new-post" route can be lazy loaded, only when
- * the user wants to post a new post onto the database. 
- * Therefore, loading the component related to the "/new-post"
- * route is unnecessary, and so, we need not load the component
- * related to "/new-post" route upfront, instead, we can always
- * lazy load the respective component and its child components 
- * when the user wants/needs it.
- * 
- * This technique of downloading/acquiring a resource 
- * (component in this case) only when needed by the end-user, 
- * is known as Code Splitting (or) Lazy Loading.
- * 
- * NOTE: Code Splitting is heavily dependent on the WEBPACK 
- * configuration. The Webpack config generated from the 
- * `npx create-react-app` command, has a webpack configuration
- * which supports the implementation of code splitting as shown
- * in here.
- */
-
 // CUSTOM COMPONENTS
-/**
- * Direct imports inform Webpack (The Build Tool used BTS) that
- * this particular component that's being imported, is a 
- * dependency which is to be included directly inside 
- * `bundle.js` file (which is the final file to deployed).
- * 
- * For Lazy Loading, we don't want to import the component
- * (or resource) directly, as shown above for React and 
- * Component (or for Posts as shown below), but we want to 
- * load it only when needed.
- * 
- * For that, we need to prepare Webpack to dynamically bundle 
- * some extra resource/component for this potentially loaded
- * code. 
- * 
- * Therefore, to import the <NewPost /> component dynamically
- * (for lazy loading on "/new-post/" route), we will import the
- * HOC which lazy loads the required component passed to the 
- * dynamic import() method, and returns the respective 
- * component related to the specified module which is mentioned
- * as a parameter to the dynamic import() method.
- */
 import Posts from '../../containers/Blog/Posts/Posts';  // direct import
 // import NewPost from './NewPost/NewPost';
-import asyncLazyLoadComponent from '../../hoc/LazyLoader/asyncLazyComponent';
+// import asyncLazyLoadComponent from '../../hoc/LazyLoader/asyncLazyComponent';
+
+/**
+ * Instead of using our own custom-made HOC, from React v16.6,
+ * we can use React.lazy() method and replace what our 
+ * asyncLazyLoadComponent() method did. The lazy() method also
+ * takes in an anonymous callback function which returns a
+ * call to the dynamic import() method, which returns a Promise
+ */
 
 // this following line is a dynamic import using the import()
-const AsyncNewPost = asyncLazyLoadComponent(() => import('./NewPost/NewPost'));
+// const AsyncNewPost = asyncLazyLoadComponent(() => import('./NewPost/NewPost'));
+
+// Instead of the using our custom HOC for lazy loading the 
+// <NewPost /> component, we can now use React.lazy() as shown
+// below.
+const AsyncNewPost = React.lazy(() => import('./NewPost/NewPost')); // only supports default exports.
+
+/**
+ * Now, we will render the <NewPost /> which is now our 
+ * <AsyncNewPost /> component inside a <React.Suspense /> 
+ * Component as shown in the `render` prop of the <Route />
+ * component defined for the "/new-post" `path` below (line #72)
+ */
 
 class Blog extends Component {
   state = { auth: true };
-
   render() {
     return (
       <div className="Blog">
@@ -115,16 +68,16 @@ class Blog extends Component {
             </ul>
           </nav>
         </header>
-        {
-        /**
-         * Now, we can use the <AsyncNewPost /> component
-         * that we will get dynamically, only when the 
-         * component related to the "/new-post" route is 
-         * routed/clicked by the user.
-         */
-        }
         <Switch>
-          {this.state.auth ? <Route path="/new-post" component={AsyncNewPost} /> : null}
+          {this.state.auth ?
+            <Route
+              path="/new-post"
+              render={() =>
+                <Suspense fallback={<div style={{ textAlign: 'center' }}>Loading...</div>}>
+                  <AsyncNewPost />
+                </Suspense>
+              }
+            /> : null}
           <Route path="/posts" component={Posts} />
           <Route render={() => <h1 style={{textAlign: 'center'}}>404 Not Found</h1>} />
           {/*<Redirect from="/" to="/posts" />*/}
@@ -138,14 +91,12 @@ class Blog extends Component {
 export default Blog;
 
 /**
- * Now, whenever we click on the "New Post" link (or get 
- * routed to "/new-post" route), we might not see any changes
- * upfront, but if we open the `Network` tab of the Dev Tools
- * of our browser, and then see what is happening when we go
- * to the "/new-post" route for the first, we can see that we
- * are actually downloading the required JS file as a small
- * chunk from the server (thanks to HTTP v2) asynchronously.
+ * VERY IMPORTANT (README) on React.lazy() & <React.Suspense />
+ * ------------------------------------------------------------
  * 
- * Whereas, before lazy loading the <NewPost /> component, we
- * were getting it inside the bundle.js file at once.
+ * We can use lazy loading for any component using 
+ * React.lazy() method along with the <React.Suspense /> 
+ * wrapper. We can use it even for loading components which
+ * aren't rendered from the <Route /> component defined 
+ * inside the <BrowserRouter /> component.
  */

http-ajax-routing/src/hoc/LazyLoader/asyncLazyComponent.js

@@ -1,23 +1,13 @@
-/**
- * This component is a HOC which wraps a component generated 
- * asynchronously and loaded only when it is needed.
- */
-
 import React, { Component } from 'react';
 
-// Returns an Async Component (which is a Promise)
+// Returns a Component (takes in a Callback function which returns a Promise)
 const asyncLazyComponent = importAsyncComponentPromise => {
   return class extends Component {
     // We always maintain a state which stores a component
     state = {
       component: null,  // initial value of component is null
     }
 
-    // importAsyncComponentPromise is a callback function which
-    // returns a Promise. The Promise on Resolve state (i.e.,
-    // inside the .then(response)) returns a component, which
-    // is our component that's to be lazy-loaded onto the view.
-
     // That component (say `cmp`) is set in this state's 
     // component using the setState method, where the cmp has
     // a default field, which has the actual component.
@@ -31,13 +21,6 @@ const asyncLazyComponent = importAsyncComponentPromise => {
         .catch(err => err);
     }
 
-    // Now, at some point of time, we would've loaded the 
-    // actual component from the dynamic import(), and it will
-    // be store in our state inside the `component` field.
-
-    // As this is an HOC, we return component after we render 
-    // it, to the dynamic import() being called wherever this
-    // asyncLazyComponent HOC is called.
     render() {
       const Component = this.state.component;
       return Component ? <Component {...this.props} /> : null;