diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 04179eac04..09c33aa060 100644 --- a/src/components/LayerUI.tsx +++ b/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"; @@ -480,39 +480,28 @@ const LayerUI = ({ ); }; -const stripIrrelevantAppStateProps = ( - appState: AppState, -): Partial => { - const { suggestedBindings, startBoundElement, cursorButton, ...ret } = - appState; - return ret; -}; - -const areEqual = (prevProps: LayerUIProps, nextProps: LayerUIProps) => { - // short-circuit early - if (prevProps.children !== nextProps.children) { - return false; - } +const areEqual = (prev: LayerUIProps, next: LayerUIProps) => { + const getNecessaryObj = (appState: AppState): Partial => { + const { + suggestedBindings, + startBoundElement: boundElement, + ...ret + } = appState; + return ret; + }; + const prevAppState = getNecessaryObj(prev.appState); + const nextAppState = getNecessaryObj(next.appState); - 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)[]; 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]) ); }; diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx index 52c3b48970..f29b7cc8b2 100644 --- a/src/packages/excalidraw/index.tsx +++ b/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< diff --git a/src/utils.ts b/src/utils.ts index d3d80560be..6b2ebbeb61 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -728,15 +728,3 @@ export const getReactChildren = < return [knownChildren, restChildren] as const; }; - -export const isShallowEqual = >( - 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]); -};