Lazy load route components + another hooks example

- good to have examples

go/go_ahead/src/Components/Molecules/DebugRead.jsx

-import React from "react";
-import { GetAllGoLinks } from "../../Utils";
+import React, { useState, useEffect } from "react";
 import { Button, Card, CardBody, CardTitle, Table } from "reactstrap";
 
-class DebugRead extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      GoLinks: [],
-      error: null
-    };
-    // This binding is necessary to make `this` work in the callback
-    this.refreshGoLinks = this.refreshGoLinks.bind(this);
-  }
+const DebugRead = () => {
+  const [goLinks, updateGoLinks] = useState([]);
 
-  async refreshGoLinks() {
-    GetAllGoLinks()
-      .then(data =>
-        this.setState({
-          GoLinks: data
-        })
-      )
-      .catch(reason => this.setState({ error: reason }));
-  }
+  const getAllGoLinks = async () => {
+    let response = await fetch("/api/golinks/", {
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    let data = await response.json();
+    updateGoLinks(data);
+  };
 
-  async componentDidMount() {
-    this.refreshGoLinks();
-  }
+  useEffect(() => {
+    getAllGoLinks();
+  }, []);
 
-  render() {
-    return (
-      <div>
-        <Card>
-          <CardBody>
-            <CardTitle className="d-flex">
-              Read{" "}
-              <Button
-                className="ml-auto"
-                onClick={this.refreshGoLinks}
-                outline
-                color="primary"
-              >
-                Refresh
-              </Button>
-            </CardTitle>
+  return (
+    <div>
+      <Card>
+        <CardBody>
+          <CardTitle className="d-flex">
+            Read
+            <Button
+              className="ml-auto"
+              onClick={() => getAllGoLinks()}
+              outline
+              color="primary"
+            >
+              Refresh
+            </Button>
+          </CardTitle>
 
-            <Table>
-              <thead>
-                <tr>
-                  <th>short</th>
-                  <th>destination</th>
-                  <th>expires</th>
+          <Table>
+            <thead>
+              <tr>
+                <th>short</th>
+                <th>destination</th>
+                <th>expires</th>
+              </tr>
+            </thead>
+            <tbody>
+              {goLinks.map(goLink => (
+                <tr key={goLink.short}>
+                  <td>
+                    <a href={`/${goLink.short}`}> /{goLink.short}</a>
+                  </td>
+                  <td>{goLink.destination}</td>
+                  <td>{goLink.date_expires}</td>
                 </tr>
-              </thead>
-              <tbody>
-                {this.state.GoLinks.map(golink => (
-                  <tr key={golink.short}>
-                    <td>
-                      <a href={`/${golink.short}`}> /{golink.short}</a>
-                    </td>
-                    <td>{golink.destination}</td>
-                    <td>{golink.date_expires}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </Table>
-          </CardBody>
-        </Card>
-      </div>
-    );
-  }
-}
+              ))}
+            </tbody>
+          </Table>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
 
 export default DebugRead;

go/go_ahead/src/Utils/Routes.jsx

-import React from "react";
-import { Route, withRouter } from "react-router-dom";
-import {
-  HomePage,
-  AboutPage,
-  DhaynesPage,
-  DebugCRUD,
-  NavBar
-} from "Components";
+import React, { Suspense, lazy } from "react";
+import { Route, withRouter, Switch } from "react-router-dom";
+import { NavBar } from "Components";
+
+const Home = lazy(() => import("../Components/Pages/HomePage"));
+const Dhaynes = lazy(() => import("../Components/Pages/DhaynesPage"));
+const About = lazy(() => import("../Components/Pages/AboutPage"));
+const DebugCRUD = lazy(() => import("../Components/Pages/DebugCRUD"));
 
 const NavBarWithRouter = withRouter(props => <NavBar {...props} />);
 
 const Routes = () => (
   <div>
     <NavBarWithRouter />
-    <Route path="/" exact component={HomePage} />
-    <Route path="/dhaynes" component={DhaynesPage} />
-    <Route path="/about" component={AboutPage} />
-    <Route path="/debug" component={DebugCRUD} />
+    <Suspense fallback={<div>Loading...</div>}>
+      <Switch>
+        <Route path="/" exact component={Home} />
+        <Route path="/dhaynes" component={Dhaynes} />
+        <Route path="/about" component={About} />
+        <Route path="/debug" component={DebugCRUD} />
+        <Route render={() => <div>404</div>} />
+      </Switch>
+    </Suspense>
   </div>
 );
 

package.json

@@ -25,12 +25,14 @@
       "@babel/preset-react"
     ],
     "plugins": [
-      "@babel/plugin-proposal-class-properties"
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-syntax-dynamic-import"
     ]
   },
   "dependencies": {
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
     "babel-core": "^6.26.3",

yarn.lock

@@ -294,6 +294,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-dynamic-import@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
+  integrity sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470"