Use Suspense, StrictMode, lazy and memo

Author: Sergio Xalambrí

.dockerignore

@@ -0,0 +1,5 @@
+*
+!public
+!src
+!package.json
+!yarn.lock

Dockerfile

@@ -0,0 +1,9 @@
+FROM mhart/alpine-node:10
+ARG CI
+WORKDIR /usr/src
+COPY package.json yarn.lock /usr/src/
+RUN yarn install
+COPY . .
+RUN yarn test
+RUN yarn build
+RUN mv /usr/src/build /public

now.json

@@ -0,0 +1,18 @@
+{
+  "name": "react-lazy-memo",
+  "alias": "react-lazy-memo.now.sh",
+  "type": "static",
+  "build": {
+    "env": {
+      "CI": "true"
+    }
+  },
+  "static": {
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/App.js

@@ -1,24 +1,30 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component, Suspense, lazy, memo } from "react";
+import "./App.css";
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+const Logo = lazy(async () => {
+  await sleep(1000);
+  return import("./logo.js");
+});
+
+const Placeholder = memo(() => <strong>Loading...</strong>);
 
 class App extends Component {
+  state = {
+    alt: 'React',
+  }
+  async componentDidMount() {
+    await sleep(5000);
+    this.setState({ alt: 'React Lazy' });
+  }
   render() {
     return (
       <div className="App">
         <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
+          <Suspense maxDuration={300} fallback={<Placeholder />}>
+            <Logo alt={this.state.alt} />
+          </Suspense>
         </header>
       </div>
     );

src/index.js

@@ -1,12 +1,19 @@
-import React from 'react';
+import React, { StrictMode, unstable_ConcurrentMode as ConcurrentMode } from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+// import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <ConcurrentMode>
+    <StrictMode>
+      <App />
+    </StrictMode>
+  </ConcurrentMode>,
+  document.getElementById('root')
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// serviceWorker.unregister();

src/logo.js

@@ -0,0 +1,15 @@
+import React, { memo } from "react";
+import logo from './logo.svg';
+
+function Logo({ alt }) {
+  return (
+    <figure>
+      <img src={logo} className="App-logo" alt={alt} />
+      <figcaption>{alt}</figcaption>
+    </figure>
+  );
+}
+
+export default memo(Logo, (prevProps, nextProps) => {
+  return prevProps.alt === nextProps.alt;
+});