feat(app): optimize rendering by wrapping onMousedown in callback 🤓

mukuljainx · May 17, 2021 · b54889e · b54889e
1 parent f72ee18
commit b54889e
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 20 deletions.
diff --git a/src/apps/appManager/index.tsx b/src/apps/appManager/index.tsx
@@ -23,10 +23,11 @@ interface IProps {
   path: string;
   instanceId: string;
   appName: string;
-  onMouseDown: (event: React.MouseEvent) => void;
+  dragId: string;
+  onMouseDown: (event: React.MouseEvent, dragId: string) => void;
 }
 
-const AppManager = ({ onMouseDown, appName, instanceId }: IProps) => {
+const AppManager = ({ onMouseDown, appName, instanceId, dragId }: IProps) => {
   const [apps, setApps] = React.useState<IApp[]>([]);
   const [selectedApp, setSelectedApp] = React.useState(-1);
   const [view, setView] =
@@ -61,6 +62,7 @@ const AppManager = ({ onMouseDown, appName, instanceId }: IProps) => {
       instanceId={instanceId}
       icon="photo"
       name="App Manager"
+      dragId={dragId}
     >
       <Wrapper>
         <If condition={localHistory.getCurrent() === "/list"}>

diff --git a/src/apps/folder/index.tsx b/src/apps/folder/index.tsx
@@ -39,14 +39,15 @@ interface IProps {
   app: IApp;
   id: string;
   metaData: IMetaData;
-  onMouseDown: (event: React.MouseEvent) => void;
+  dragId: string;
+  onMouseDown: (event: React.MouseEvent, dragId: string) => void;
 }
 
 const getPathName = (path: string) => {
   return path.split("/").pop() || "/";
 };
 
-const Folder = ({ path, app, id, onMouseDown }: IProps) => {
+const Folder = ({ path, app, id, dragId, onMouseDown }: IProps) => {
   const { firstRender } = useDidUpdate();
   const dispatchFolderLoadEvent = React.useCallback(() => {
     // dispatch a fake animation complete event so dependent can do their work on route change
@@ -154,7 +155,7 @@ const Folder = ({ path, app, id, onMouseDown }: IProps) => {
 
   const handleTopBarMouseDown = React.useCallback(
     (event: React.MouseEvent) => {
-      onMouseDown(event);
+      onMouseDown(event, dragId);
       dispatch(bringToTop({ appName: app.appName, instanceId: app.id }));
     },
     [onMouseDown]
@@ -205,4 +206,4 @@ const Folder = ({ path, app, id, onMouseDown }: IProps) => {
     </Container>
   );
 };
-export default Folder;
+export default React.memo(Folder);
diff --git a/src/apps/index.tsx b/src/apps/index.tsx
@@ -12,19 +12,13 @@ interface IProps {
   data: any;
   metaData: IMetaData;
   style: React.CSSProperties;
-  onMouseDown: (event: React.MouseEvent) => void;
+  onMouseDown: (event: React.MouseEvent, dragId: string) => void;
+  dragId: string;
   weight: number;
 }
 
-const App = ({
-  app,
-  data,
-  id,
-  metaData,
-  style,
-  weight,
-  onMouseDown,
-}: IProps) => {
+const App = (props: IProps) => {
+  const { app, data, id, metaData, style, weight, dragId, onMouseDown } = props;
   switch (app.appName) {
     case "folder": {
       return (
@@ -41,6 +35,7 @@ const App = ({
             key={id}
             app={app}
             id={id}
+            dragId={dragId}
             {...data}
           />
         </AnimatedFileWrapper>
@@ -58,6 +53,7 @@ const App = ({
           <Photo
             {...(data as any)}
             instanceId={id}
+            dragId={dragId}
             appName={app.appName}
             onMouseDown={onMouseDown}
           />
@@ -76,6 +72,7 @@ const App = ({
           <AppManager
             {...(data as any)}
             instanceId={id}
+            dragId={dragId}
             appName={app.appName}
             onMouseDown={onMouseDown}
           />
@@ -87,4 +84,4 @@ const App = ({
   return null;
 };
 
-export default App;
+export default React.memo(App);
diff --git a/src/apps/photo/index.tsx b/src/apps/photo/index.tsx
@@ -14,13 +14,15 @@ interface IProps {
   instanceId: string;
   appName: string;
   onMouseDown: (event: React.MouseEvent) => void;
+  dragId: string;
 }
 
-const Photo = ({ path, appName, instanceId, onMouseDown }: IProps) => {
+const Photo = ({ path, appName, instanceId, onMouseDown, dragId }: IProps) => {
   const { render } = useAnimationEndRender({ instanceId });
 
   return (
     <AppShell
+      dragId={dragId}
       onMouseDown={onMouseDown}
       appName={appName}
       instanceId={instanceId}

diff --git a/src/apps/shell/index.tsx b/src/apps/shell/index.tsx
@@ -34,6 +34,8 @@ type IProps = ReactHTMLElement<
     children: React.ReactChild;
     width?: React.CSSProperties["width"];
     height?: React.CSSProperties["height"];
+    onMouseDown: (event: React.MouseEvent, dragId: string) => void;
+    dragId: string;
   }
 >;
 
@@ -48,8 +50,16 @@ const AppShell = ({
   width,
   height,
   style,
+  dragId,
   ...rest
 }: IProps) => {
+  const handleMouseDownDrag = React.useCallback(
+    (event: React.MouseEvent) => {
+      onMouseDown(event, dragId);
+    },
+    [onMouseDown, dragId]
+  );
+
   return (
     <Wrapper
       {...rest}
@@ -61,7 +71,7 @@ const AppShell = ({
     >
       <Stack fullWidth fullHeight flexDirection="column">
         <StackItem flexShrink={0} data-test="topbar">
-          <TopBar data-id="app-shell-top-bar" onMouseDown={onMouseDown}>
+          <TopBar data-id="app-shell-top-bar" onMouseDown={handleMouseDownDrag}>
             <Stack
               alignItems="center"
               justifyContent="space-between"

diff --git a/src/base/index.tsx b/src/base/index.tsx
@@ -54,6 +54,13 @@ const Base = ({}: IProps) => {
     dispatch(initRoutes(user?.name || "Guest user"));
   }, []);
 
+  const handleMouseDownEvent = React.useCallback(
+    (event: React.MouseEvent, dragId: string) => {
+      handleMouseDown(event, dragId);
+    },
+    []
+  );
+
   return (
     <Desktop>
       <Wrapper ref={wrapperRef}>
@@ -67,12 +74,13 @@ const Base = ({}: IProps) => {
                 return (
                   <App
                     weight={app.weight + index}
-                    onMouseDown={(event) => handleMouseDown(event, dragId)}
+                    onMouseDown={handleMouseDownEvent}
                     style={{
                       transform: store.elements[dragId]?.translate.x
                         ? `translate(${store.elements[dragId]?.translate.x}px, ${store.elements[dragId]?.translate.y}px)`
                         : undefined,
                     }}
+                    dragId={dragId}
                     key={dragId}
                     app={instance}
                     data={instance.data}