Refactor: Memoize static children components.

swarad07 · May 3, 2020 · 0cd1d53 · 0cd1d53
1 parent ad93231
commit 0cd1d53
Show file tree

Hide file tree

Showing 8 changed files with 2,010 additions and 1,417 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,36 +5,35 @@
   "homepage": "http://covid19india.github.io/",
   "dependencies": {
     "@juggle/resize-observer": "^3.1.3",
-    "@material-ui/core": "^4.9.9",
-    "@primer/components": "^18.1.0",
-    "@testing-library/jest-dom": "^5.3.0",
-    "@testing-library/react": "^10.0.1",
+    "@material-ui/core": "^4.9.12",
+    "@primer/components": "^18.1.1",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^10.0.4",
     "@welldone-software/why-did-you-render": "^4.1.3",
     "animejs": "^3.2.0",
     "axios": "^0.19.2",
     "chart.js": "^2.9.3",
     "corejs-typeahead": "^1.3.1",
-    "d3": "^5.15.0",
-    "date-fns": "^2.11.0",
+    "d3": "^5.16.0",
+    "date-fns": "^2.12.0",
     "date-fns-tz": "^1.0.10",
     "deepmerge": "^4.2.2",
     "fast-deep-equal": "^3.1.1",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.0",
     "react": "^16.13.1",
-    "react-autosuggest": "^10.0.0",
     "react-chartjs-2": "^2.9.0",
     "react-date-picker": "^8.0.1",
     "react-dom": "^16.13.1",
-    "react-feather": "^2.0.3",
-    "react-force-graph-2d": "^1.15.1",
+    "react-feather": "^2.0.8",
+    "react-force-graph-2d": "^1.15.4",
     "react-helmet": "^6.0.0",
     "react-infinite-scroll-component": "^5.0.4",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
+    "react-scripts": "3.4.1",
     "react-table": "^7.0.4",
     "react-tooltip": "^4.2.5",
-    "react-use": "^14.1.1",
-    "react-virtualized": "^9.21.2",
+    "react-use": "^14.2.0",
+    "source-map-explorer": "^2.4.2",
     "styled-components": "^5.1.0",
     "topojson": "^3.0.2"
   },
@@ -48,7 +47,8 @@
     "eslint:fix": "eslint --fix --max-warnings=0",
     "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|md|html)\"",
     "scss-lint": "sass-lint 'src/**/*.scss' -v -f table --max-warnings 0",
-    "scss-lint:fix": "sass-lint-auto-fix 'src/**/*.scss' -d -h -c '.sass-lint-auto-fix.yml'"
+    "scss-lint:fix": "sass-lint-auto-fix 'src/**/*.scss' -d -h -c '.sass-lint-auto-fix.yml'",
+    "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -76,13 +76,13 @@
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^6.10.1",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
-    "husky": "^4.2.3",
-    "lint-staged": "^10.0.9",
-    "prettier": "^2.0.2",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.2",
+    "prettier": "^2.0.5",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.0"
   },
@@ -97,5 +97,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "sideEffects": false
 }
diff --git a/src/components/home.js b/src/components/home.js
@@ -19,7 +19,7 @@ import {
 } from '../utils/commonfunctions';
 
 import axios from 'axios';
-import React, {useState, useCallback} from 'react';
+import React, {useState, useCallback, useMemo} from 'react';
 import * as Icon from 'react-feather';
 import {Helmet} from 'react-helmet';
 import {useEffectOnce, useLocalStorage} from 'react-use';
@@ -42,6 +42,29 @@ function Home(props) {
   );
   const [newUpdate, setNewUpdate] = useLocalStorage('newUpdate', false);
 
+  const Bell = useMemo(
+    () => (
+      <Icon.Bell
+        onClick={() => {
+          setShowUpdates(!showUpdates);
+          setNewUpdate(false);
+        }}
+      />
+    ),
+    [setNewUpdate, showUpdates]
+  );
+
+  const BellOff = useMemo(
+    () => (
+      <Icon.BellOff
+        onClick={() => {
+          setShowUpdates(!showUpdates);
+        }}
+      />
+    ),
+    [showUpdates]
+  );
+
   useEffectOnce(() => {
     getStates();
   });
@@ -142,24 +165,11 @@ function Home(props) {
               </h5>
               {!showUpdates && (
                 <div className="bell-icon">
-                  {fetched && (
-                    <Icon.Bell
-                      onClick={() => {
-                        setShowUpdates(!showUpdates);
-                        setNewUpdate(false);
-                      }}
-                    />
-                  )}
+                  {fetched && Bell}
                   {newUpdate && <div className="indicator"></div>}
                 </div>
               )}
-              {showUpdates && (
-                <Icon.BellOff
-                  onClick={() => {
-                    setShowUpdates(!showUpdates);
-                  }}
-                />
-              )}
+              {fetched && showUpdates && BellOff}
             </div>
           </div>
 

diff --git a/src/components/mapexplorer.js b/src/components/mapexplorer.js
@@ -22,6 +22,9 @@ const isEqual = (prevProps, currProps) => {
   if (!equal(prevProps.mapOption, currProps.mapOption)) {
     return false;
   }
+  if (!equal(prevProps.anchor, currProps.anchor)) {
+    return false;
+  }
   return true;
 };
 

diff --git a/src/components/row.js b/src/components/row.js
@@ -6,7 +6,7 @@ import {
 
 import {formatDistance} from 'date-fns';
 import equal from 'fast-deep-equal';
-import React, {useState, useCallback} from 'react';
+import React, {useState, useCallback, useMemo} from 'react';
 import * as Icon from 'react-feather';
 import {Link} from 'react-router-dom';
 import ReactTooltip from 'react-tooltip';
@@ -33,6 +33,21 @@ function Row({
     isAscending: false,
   });
 
+  const ArrowUp = useMemo(() => <Icon.ArrowUp />, []);
+
+  const Chevron = useMemo(
+    () => (
+      <span
+        className={`dropdown ${
+          showDistricts ? 'rotateRightDown' : 'rotateDownRight'
+        }`}
+      >
+        <Icon.ChevronDown />
+      </span>
+    ),
+    [showDistricts]
+  );
+
   const onHighlightStateWrapper = useCallback(
     (state) => {
       if (!equal(state, regionHighlighted?.state)) {
@@ -102,15 +117,7 @@ function Row({
       >
         <td style={{fontWeight: 600}}>
           <div className="table__title-wrapper">
-            {state.state !== 'TT' && (
-              <span
-                className={`dropdown ${
-                  showDistricts ? 'rotateRightDown' : 'rotateDownRight'
-                }`}
-              >
-                <Icon.ChevronDown />
-              </span>
-            )}
+            {state.state !== 'TT' && Chevron}
             <span className="actual__title-wrapper">
               {state.state}
               {state.statenotes && (
@@ -137,7 +144,7 @@ function Row({
         </td>
         <td>
           <span className="deltas" style={{color: '#ff073a'}}>
-            {state.deltaconfirmed > 0 && <Icon.ArrowUp />}
+            {state.deltaconfirmed > 0 && ArrowUp}
             {state.deltaconfirmed > 0 ? `${state.deltaconfirmed}` : ''}
           </span>
           <span className="table__count-text">
@@ -159,7 +166,7 @@ function Row({
           }}
         >
           <span className="deltas" style={{color: '#28a745'}}>
-            {state.deltarecovered > 0 && <Icon.ArrowUp />}
+            {state.deltarecovered > 0 && ArrowUp}
             {state.deltarecovered > 0 ? `${state.deltarecovered}` : ''}
           </span>
           <span className="table__count-text">
@@ -174,7 +181,7 @@ function Row({
           }}
         >
           <span className="deltas" style={{color: '#6c757d'}}>
-            {state.deltadeaths > 0 && <Icon.ArrowUp />}
+            {state.deltadeaths > 0 && ArrowUp}
             {state.deltadeaths > 0 ? `${state.deltadeaths}` : ''}
           </span>
           <span className="table__count-text">

diff --git a/src/components/table.js b/src/components/table.js
@@ -1,7 +1,7 @@
 import Row from './row';
 
 import equal from 'fast-deep-equal';
-import React, {useState} from 'react';
+import React, {useState, useMemo} from 'react';
 import {Link} from 'react-router-dom';
 
 const isEqual = (prevProps, currProps) => {
@@ -24,6 +24,28 @@ function Table({
       : false,
   });
 
+  const FineprintTop = useMemo(
+    () => (
+      <h5 className="table-fineprint fadeInUp" style={{animationDelay: '1.5s'}}>
+        Compiled from State Govt. numbers,{' '}
+        <Link to="/faq" style={{color: '#6c757d'}}>
+          know more!
+        </Link>
+      </h5>
+    ),
+    []
+  );
+
+  const FineprintBottom = useMemo(
+    () => (
+      <h5 className="table-fineprint fadeInUp" style={{animationDelay: '1s'}}>
+        {states.slice(1).filter((s) => s && s.confirmed > 0).length} States/UTS
+        Affected
+      </h5>
+    ),
+    [states]
+  );
+
   const doSort = (e) => {
     const totalRow = states.splice(0, 1);
     states.sort((StateData1, StateData2) => {
@@ -75,15 +97,7 @@ function Table({
   if (states.length > 0) {
     return (
       <React.Fragment>
-        <h5
-          className="table-fineprint fadeInUp"
-          style={{animationDelay: '1.5s'}}
-        >
-          Compiled from State Govt. numbers,{' '}
-          <Link to="/faq" style={{color: '#6c757d'}}>
-            know more!
-          </Link>
-        </h5>
+        {FineprintTop}
         <table className="table fadeInUp" style={{animationDelay: '1.8s'}}>
           <thead>
             <tr>
@@ -255,10 +269,7 @@ function Table({
             />
           </tbody>
         </table>
-        <h5 className="table-fineprint fadeInUp" style={{animationDelay: '1s'}}>
-          {states.slice(1).filter((s) => s && s.confirmed > 0).length}{' '}
-          States/UTS Affected
-        </h5>
+        {states && FineprintBottom}
       </React.Fragment>
     );
   } else {

diff --git a/src/components/timeseriesexplorer.js b/src/components/timeseriesexplorer.js
@@ -6,7 +6,13 @@ import * as Icon from 'react-feather';
 import {useLocalStorage} from 'react-use';
 
 const isEqual = (currProps, prevProps) => {
-  return equal(currProps.activeStateCode, prevProps.activeStateCode);
+  if (!equal(currProps.activeStateCode, prevProps.activeStateCode)) {
+    return false;
+  }
+  if (!equal(currProps.anchor, prevProps.anchor)) {
+    return false;
+  }
+  return true;
 };
 
 function TimeSeriesExplorer({

diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-import './wdyr';
+// import './wdyr';
 import React from 'react';
 import ReactDOM from 'react-dom';