Revert "fix: React.memo resolvers not accounting for all props (#6042)"

This reverts commit 618442299f85229a0e5c1fdb7c3bb9aeaa850a50.

src/components/App.tsx

@@ -567,6 +567,7 @@ class App extends React.Component<AppProps, AppState> {
                     value={this.actionManager}
                   >
                     <LayerUI
+                      test={<div />}
                       canvas={this.canvas}
                       appState={this.state}
                       files={this.files}

src/components/LayerUI.tsx

@@ -16,7 +16,7 @@ import {
   UIChildrenComponents,
   UIWelcomeScreenComponents,
 } from "../types";
-import { isShallowEqual, muteFSAbortError, getReactChildren } from "../utils";
+import { muteFSAbortError, getReactChildren } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
@@ -52,6 +52,7 @@ import { useAtom } from "jotai";
 import MainMenu from "./main-menu/MainMenu";
 
 interface LayerUIProps {
+  test: JSX.Element;
   actionManager: ActionManager;
   appState: AppState;
   files: BinaryFiles;
@@ -479,39 +480,28 @@ const LayerUI = ({
   );
 };
 
-const stripIrrelevantAppStateProps = (
-  appState: AppState,
-): Partial<AppState> => {
-  const { suggestedBindings, startBoundElement, cursorButton, ...ret } =
-    appState;
-  return ret;
-};
+const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
+  const getNecessaryObj = (appState: AppState): Partial<AppState> => {
+    const {
+      suggestedBindings,
+      startBoundElement: boundElement,
+      ...ret
+    } = appState;
+    return ret;
+  };
+  const prevAppState = getNecessaryObj(prev.appState);
+  const nextAppState = getNecessaryObj(next.appState);
 
-const areEqual = (prevProps: LayerUIProps, nextProps: LayerUIProps) => {
-  // short-circuit early
-  if (prevProps.children !== nextProps.children) {
-    return false;
-  }
-
-  const {
-    canvas: _prevCanvas,
-    // not stable, but shouldn't matter in our case
-    onInsertElements: _prevOnInsertElements,
-    appState: prevAppState,
-    ...prev
-  } = prevProps;
-  const {
-    canvas: _nextCanvas,
-    onInsertElements: _nextOnInsertElements,
-    appState: nextAppState,
-    ...next
-  } = nextProps;
+  const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
 
   return (
-    isShallowEqual(
-      stripIrrelevantAppStateProps(prevAppState),
-      stripIrrelevantAppStateProps(nextAppState),
-    ) && isShallowEqual(prev, next)
+    prev.renderTopRightUI === next.renderTopRightUI &&
+    prev.renderCustomStats === next.renderCustomStats &&
+    prev.renderCustomSidebar === next.renderCustomSidebar &&
+    prev.langCode === next.langCode &&
+    prev.elements === next.elements &&
+    prev.files === next.files &&
+    keys.every((key) => prevAppState[key] === nextAppState[key])
   );
 };
 

src/packages/excalidraw/index.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, forwardRef } from "react";
 import { InitializeApp } from "../../components/InitializeApp";
 import App from "../../components/App";
-import { isShallowEqual } from "../../utils";
 
 import "../../css/app.scss";
 import "../../css/styles.scss";
@@ -130,11 +129,6 @@ const areEqual = (
   prevProps: PublicExcalidrawProps,
   nextProps: PublicExcalidrawProps,
 ) => {
-  // short-circuit early
-  if (prevProps.children !== nextProps.children) {
-    return false;
-  }
-
   const {
     initialData: prevInitialData,
     UIOptions: prevUIOptions = {},
@@ -183,7 +177,13 @@ const areEqual = (
     return prevUIOptions[key] === nextUIOptions[key];
   });
 
-  return isUIOptionsSame && isShallowEqual(prev, next);
+  const prevKeys = Object.keys(prevProps) as (keyof typeof prev)[];
+  const nextKeys = Object.keys(nextProps) as (keyof typeof next)[];
+  return (
+    isUIOptionsSame &&
+    prevKeys.length === nextKeys.length &&
+    prevKeys.every((key) => prev[key] === next[key])
+  );
 };
 
 const forwardedRefComp = forwardRef<

src/utils.ts

@@ -728,15 +728,3 @@ export const getReactChildren = <
 
   return [knownChildren, restChildren] as const;
 };
-
-export const isShallowEqual = <T extends Record<string, any>>(
-  objA: T,
-  objB: T,
-) => {
-  const aKeys = Object.keys(objA);
-  const bKeys = Object.keys(objA);
-  if (aKeys.length !== bKeys.length) {
-    return false;
-  }
-  return aKeys.every((key) => objA[key] === objB[key]);
-};