updated react hooks scenario in cra-memory-considerate-loading-sketchfab

GoogleChromeLabs · Aug 15, 2019 · 570d373 · 570d373
1 parent 420ff29
commit 570d373
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 41 deletions.
diff --git a/cra-memory-considerate-loading-sketchfab/src/components/MemoryStatusUI/index.js b/cra-memory-considerate-loading-sketchfab/src/components/MemoryStatusUI/index.js
@@ -18,7 +18,7 @@ import React, { Fragment } from 'react';
 
 import './memory-status-ui.css';
 
-const MemoryStatusUI = ({ totalJSHeapSize, usedJSHeapSize, jsHeapSizeLimit, overUsedMemorySize, usedMemoryPercent, unsupportMessage }) => (
+const MemoryStatusUI = ({ totalJSHeapSize, usedJSHeapSize, jsHeapSizeLimit, overLoad, unsupportMessage }) => (
   <div className='list'>
     <a
       className='notice'
@@ -45,12 +45,8 @@ const MemoryStatusUI = ({ totalJSHeapSize, usedJSHeapSize, jsHeapSizeLimit, over
         </div>
 
         <div className='list-item'>
-          <div>overUsedMemorySize(Byte):</div>
-          <div>{overUsedMemorySize}</div>
-        </div>
-        <div className='list-item'>
-          <div>usedMemoryPercent(%):</div>
-          <div>{usedMemoryPercent.toFixed(2)}</div>
+          <div>Is Memory overLoad?:</div>
+          <div>{overLoad.toString()}</div>
         </div>
       </Fragment>
     ) }

diff --git a/cra-memory-considerate-loading-sketchfab/src/components/ModelViewer/index.js b/cra-memory-considerate-loading-sketchfab/src/components/ModelViewer/index.js
@@ -22,32 +22,17 @@ const SketchFabEmbed = lazy(() => import('./SketchFabEmbed'));
 const LazyModelImageViewer = lazy(() => import('./ModelImageViewer'));
 
 const ModelViewer = ({ model, fallbackSrc, memoryStatus }) => {
-  const { usedMemoryPercent } = memoryStatus;
+  const { overLoad } = memoryStatus;
 
-  let viewer = null;
-  switch (true) {
-    case usedMemoryPercent > 75:
-      viewer = (
-        <Suspense fallback={<Loading />}>
-          <LazyModelImageViewer src={fallbackSrc} />
-        </Suspense>
-      );
-      break;
-    case usedMemoryPercent > 0:
-      viewer = (
-        <Suspense fallback={<Loading />}>
-          <SketchFabEmbed model={model} />
-        </Suspense>
-      );
-      break;
-    default:
-      viewer = (
-        <Suspense fallback={<Loading />}>
-          <SketchFabEmbed model={model} />
-        </Suspense>
-      );
-      break;
-  }
+  const viewer = overLoad ? (
+    <Suspense fallback={<Loading />}>
+      <LazyModelImageViewer src={fallbackSrc} />
+    </Suspense>
+  ) : (
+    <Suspense fallback={<Loading />}>
+      <SketchFabEmbed model={model} />
+    </Suspense>
+  );
 
   return (
     <Fragment>

diff --git a/cra-memory-considerate-loading-sketchfab/src/utils/hooks.js b/cra-memory-considerate-loading-sketchfab/src/utils/hooks.js
@@ -17,16 +17,17 @@
 import { useState, useEffect } from 'react';
 
 const unsupportMessage = 'The Memory Status API is not supported on this platform.';
-const windowPerformance = window.performance;
 
-const MAX_MEMORY_LIMIT = 20 * 1048576; // 20MB
-// const MAX_PERCENT_THRESHOLD = 90;
-
-const isMemorySupported = () => {
-  return windowPerformance && windowPerformance.memory;
-};
+// Tune these for your application
+const MAX_MEMORY_LIMIT = 50 * 1048576; // 20MB
+const MAX_PERCENT_THRESHOLD = 90;
 
 const useMemoryStatus = () => {
+  const windowPerformance = window.performance;
+  const isMemorySupported = () => {
+    return windowPerformance && windowPerformance.memory;
+  };
+
   const [memoryStatus, setMemoryStatus] = useState(null);
 
   const getTotalJSHeapSize = () => windowPerformance.memory.totalJSHeapSize;
@@ -48,12 +49,22 @@ const useMemoryStatus = () => {
 
   useEffect(() => {
     if (isMemorySupported()) {
+      const overUsedMemorySize = getOverUsedMemorySize();
+      const usedMemoryPercent = getUsedMemoryPercent();
+      let overLoad = false;
+      // Check if we've exceeded absolute memory limit
+      if (overUsedMemorySize > 0) {
+        overLoad = true;
+      }
+      // Check if we've exceeded relative memory limit for client
+      if (usedMemoryPercent > MAX_PERCENT_THRESHOLD) {
+        overLoad = true;
+      }
       setMemoryStatus({
         totalJSHeapSize: getTotalJSHeapSize(),
         usedJSHeapSize: getUsedJSHeapSize(),
         jsHeapSizeLimit: getJSHeapSizeLimit(),
-        overUsedMemorySize: getOverUsedMemorySize(),
-        usedMemoryPercent: getUsedMemoryPercent()
+        overLoad
       });
     } else {
       setMemoryStatus({unsupportMessage});