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

This commit is contained in:
David Luzar 2023-01-09 10:24:17 +01:00 committed by GitHub
parent 06b45e0cfc
commit 618442299f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 27 deletions

View file

@ -15,7 +15,11 @@ import {
BinaryFiles,
UIChildrenComponents,
} from "../types";
import { muteFSAbortError, ReactChildrenToObject } from "../utils";
import {
isShallowEqual,
muteFSAbortError,
ReactChildrenToObject,
} from "../utils";
import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
import CollabButton from "./CollabButton";
import { ErrorDialog } from "./ErrorDialog";
@ -496,28 +500,39 @@ const LayerUI = ({
);
};
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 stripIrrelevantAppStateProps = (
appState: AppState,
): Partial<AppState> => {
const { suggestedBindings, startBoundElement, cursorButton, ...ret } =
appState;
return ret;
};
const keys = Object.keys(prevAppState) as (keyof Partial<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;
return (
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])
isShallowEqual(
stripIrrelevantAppStateProps(prevAppState),
stripIrrelevantAppStateProps(nextAppState),
) && isShallowEqual(prev, next)
);
};