perf: avoid unnecessary re-rendering for demos (#1700)

umijs · May 30, 2023 · bc79d2c · bc79d2c
1 parent 84d3bdf
commit bc79d2c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 34 deletions.
diff --git a/src/client/theme-api/DumiDemo.tsx b/src/client/theme-api/DumiDemo.tsx
@@ -36,37 +36,43 @@ const DemoErrorBoundary: FC<{ children: ReactNode }> = (props) => (
   </ErrorBoundary>
 );
 
-export const DumiDemo: FC<IDumiDemoProps> = (props) => {
-  const { demos, historyType } = useSiteData();
-  const { basename } = useAppData();
-  const { component, asset } = demos[props.demo.id];
+export const DumiDemo: FC<IDumiDemoProps> = React.memo(
+  (props) => {
+    const { demos, historyType } = useSiteData();
+    const { basename } = useAppData();
+    const { component, asset } = demos[props.demo.id];
 
-  // hide debug demo in production
-  if (process.env.NODE_ENV === 'production' && props.previewerProps.debug)
-    return null;
+    // hide debug demo in production
+    if (process.env.NODE_ENV === 'production' && props.previewerProps.debug)
+      return null;
 
-  if (props.demo.inline) {
-    return <DemoErrorBoundary>{createElement(component)}</DemoErrorBoundary>;
-  }
+    if (props.demo.inline) {
+      return <DemoErrorBoundary>{createElement(component)}</DemoErrorBoundary>;
+    }
 
-  const isHashRoute = historyType === 'hash';
+    const isHashRoute = historyType === 'hash';
 
-  return (
-    <Previewer
-      asset={asset}
-      demoUrl={
-        // allow user override demoUrl by frontmatter
-        props.previewerProps.demoUrl ||
-        // when use hash route, browser can automatically handle relative paths starting with #
-        `${isHashRoute ? `#` : ''}${basename}${SP_ROUTE_PREFIX}demos/${
-          props.demo.id
-        }`
-      }
-      {...props.previewerProps}
-    >
-      {props.previewerProps.iframe ? null : (
-        <DemoErrorBoundary>{createElement(component)}</DemoErrorBoundary>
-      )}
-    </Previewer>
-  );
-};
+    return (
+      <Previewer
+        asset={asset}
+        demoUrl={
+          // allow user override demoUrl by frontmatter
+          props.previewerProps.demoUrl ||
+          // when use hash route, browser can automatically handle relative paths starting with #
+          `${isHashRoute ? `#` : ''}${basename}${SP_ROUTE_PREFIX}demos/${
+            props.demo.id
+          }`
+        }
+        {...props.previewerProps}
+      >
+        {props.previewerProps.iframe ? null : (
+          <DemoErrorBoundary>{createElement(component)}</DemoErrorBoundary>
+        )}
+      </Previewer>
+    );
+  },
+  (prev, next) => {
+    // compare length for performance
+    return JSON.stringify(prev).length === JSON.stringify(next).length;
+  },
+);
diff --git a/src/loaders/markdown/transformer/rehypeDemo.ts b/src/loaders/markdown/transformer/rehypeDemo.ts
@@ -273,9 +273,9 @@ export default function rehypeDemo(
                 localId,
                 vFile.data.frontmatter!.atomId,
               );
-              component = `React.lazy(() => import( /* webpackChunkName: "${chunkName}" */ '${winPath(
+              component = `React.memo(React.lazy(() => import( /* webpackChunkName: "${chunkName}" */ '${winPath(
                 parseOpts.fileAbsPath,
-              )}?techStack=${techStack.name}'))`;
+              )}?techStack=${techStack.name}')))`;
               // use code value as title
               // TODO: force checking
               if (codeValue) codeNode.properties!.title = codeValue;

diff --git a/src/techStacks/react.ts b/src/techStacks/react.ts
@@ -36,9 +36,9 @@ export default class ReactTechStack implements IDumiTechStack {
         },
       });
 
-      return `React.lazy(async () => {
+      return `React.memo(React.lazy(async () => {
 ${code}
-})`;
+}))`;
     }
 
     return raw;