Skip to content

Commit 5b45716

Browse files
raheeliftikhar5raheeliftikhar5
committed
added memoization
1 parent d91fe66 commit 5b45716

File tree

8 files changed

+293
-148
lines changed

8 files changed

+293
-148
lines changed

‎client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
DEFAULT_GRID_COLUMNS,
2525
DEFAULT_ROW_HEIGHT,
2626
} from "layout/calculateUtils";
27-
import _ from "lodash";
27+
import _, { isEqual } from "lodash";
2828
import {
2929
ActionExtraInfo,
3030
changeChildAction,
@@ -313,7 +313,7 @@ const ItemWrapper = styled.div<{ $disableInteract?: boolean }>`
313313
pointer-events: ${(props) => (props.$disableInteract ? "none" : "unset")};
314314
`;
315315

316-
const GridItemWrapper = React.forwardRef(
316+
const GridItemWrapper = React.memo(React.forwardRef(
317317
(
318318
props: React.PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
319319
ref: React.ForwardedRef<HTMLDivElement>
@@ -326,11 +326,11 @@ const GridItemWrapper = React.forwardRef(
326326
</ItemWrapper>
327327
);
328328
}
329-
);
329+
));
330330

331331
type GirdItemViewRecord = Record<string, GridItem>;
332332

333-
export function InnerGrid(props: ViewPropsWithSelect) {
333+
export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
334334
const {
335335
positionParams,
336336
rowCount = Infinity,
@@ -385,7 +385,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
385385

386386
const canAddSelect = useMemo(
387387
() => _.size(containerSelectNames) === _.size(editorState.selectedCompNames),
388-
[containerSelectNames, editorState]
388+
[containerSelectNames, editorState.selectedCompNames]
389389
);
390390

391391
const dispatchPositionParamsTimerRef = useRef(0);
@@ -432,16 +432,21 @@ export function InnerGrid(props: ViewPropsWithSelect) {
432432
onPositionParamsChange,
433433
onRowCountChange,
434434
positionParams,
435-
props,
435+
props.dispatch,
436+
props.containerPadding,
436437
]
437438
);
438439
const setSelectedNames = useCallback(
439440
(names: Set<string>) => {
440441
editorState.setSelectedCompNames(names);
441442
},
442-
[editorState]
443+
[editorState.setSelectedCompNames]
443444
);
444-
const { width, ref } = useResizeDetector({ onResize, handleHeight: isRowCountLocked });
445+
446+
const { width, ref } = useResizeDetector({
447+
onResize,
448+
handleHeight: isRowCountLocked,
449+
});
445450

446451
const itemViewRef = useRef<GirdItemViewRecord>({});
447452
const itemViews = useMemo(() => {
@@ -464,9 +469,10 @@ export function InnerGrid(props: ViewPropsWithSelect) {
464469
const clickItem = useCallback(
465470
(
466471
e: React.MouseEvent<HTMLDivElement,
467-
globalThis.MouseEvent>, name: string
472+
globalThis.MouseEvent>,
473+
name: string,
468474
) => selectItem(e, name, canAddSelect, containerSelectNames, setSelectedNames),
469-
[canAddSelect, containerSelectNames, setSelectedNames]
475+
[selectItem, canAddSelect, containerSelectNames, setSelectedNames]
470476
);
471477

472478
useEffect(() => {
@@ -555,7 +561,9 @@ export function InnerGrid(props: ViewPropsWithSelect) {
555561
{itemViews}
556562
</ReactGridLayout>
557563
);
558-
}
564+
}, (prevProps, newProps) => {
565+
return isEqual(prevProps, newProps);
566+
});
559567

560568
function selectItem(
561569
e: MouseEvent<HTMLDivElement>,

‎client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { EditorContext } from "comps/editorState";
22
import { EditorContainer } from "pages/common/styledComponent";
3-
import { Profiler, useContext, useRef, useState } from "react";
3+
import React, { Profiler, useContext, useRef, useState } from "react";
44
import styled from "styled-components";
55
import { profilerCallback } from "util/cacheUtils";
66
import {
@@ -20,6 +20,7 @@ import { CanvasContainerID } from "constants/domLocators";
2020
import { CNRootContainer } from "constants/styleSelectors";
2121
import { ScrollBar } from "lowcoder-design";
2222
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
23+
import { isEqual } from "lodash";
2324

2425
// min-height: 100vh;
2526

@@ -72,7 +73,7 @@ function getDragSelectedNames(
7273

7374
const EmptySet = new Set<string>();
7475

75-
export function CanvasView(props: ContainerBaseProps) {
76+
export const CanvasView = React.memo((props: ContainerBaseProps) => {
7677
const editorState = useContext(EditorContext);
7778
const [dragSelectedComps, setDragSelectedComp] = useState(EmptySet);
7879
const scrollContainerRef = useRef(null);
@@ -166,4 +167,6 @@ export function CanvasView(props: ContainerBaseProps) {
166167
</EditorContainer>
167168
</CanvasContainer>
168169
);
169-
}
170+
}, (prevProps, newProps) => {
171+
return isEqual(prevProps, newProps);
172+
});

‎client/packages/lowcoder/src/comps/comps/gridLayoutComp/dragSelector.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const InitialState = {
3838
startPoint: undefined,
3939
};
4040

41-
export class DragSelector extends React.Component<SectionProps, SectionState> {
41+
class DragSelectorComp extends React.Component<SectionProps, SectionState> {
4242
private readonly selectAreaRef: React.RefObject<HTMLDivElement>;
4343

4444
constructor(props: SectionProps) {
@@ -178,3 +178,5 @@ export class DragSelector extends React.Component<SectionProps, SectionState> {
178178
};
179179
}
180180
}
181+
182+
export const DragSelector = React.memo(DragSelectorComp);

‎client/packages/lowcoder/src/comps/comps/rootComp.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ import {
3232
import RefTreeComp from "./refTreeComp";
3333
import { ExternalEditorContext } from "util/context/ExternalEditorContext";
3434
import { useUserViewMode } from "util/hooks";
35+
import React from "react";
36+
import { isEqual } from "lodash";
3537

3638
const EditorView = lazy(
3739
() => import("pages/editor/editorView"),
@@ -55,7 +57,7 @@ const childrenMap = {
5557
preload: PreloadComp,
5658
};
5759

58-
function RootView(props: RootViewProps) {
60+
const RootView = React.memo((props: RootViewProps) => {
5961
const previewTheme = useContext(ThemeContext);
6062
const { comp, isModuleRoot, ...divProps } = props;
6163
const [editorState, setEditorState] = useState<EditorState>();
@@ -143,7 +145,9 @@ function RootView(props: RootViewProps) {
143145
</PropertySectionContext.Provider>
144146
</div>
145147
);
146-
}
148+
}, (prevProps, nextProps) => {
149+
return isEqual(prevProps, nextProps);
150+
});
147151

148152
/**
149153
* Root Comp

0 commit comments

Comments
 (0)