ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-06-13 00:07:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

frontend: introduces propsAreEqual function passed to React.memo to reduce re-rendering

Browse Source 
This function accepts the component’s previous props, and its new props.
It should return true if the old and new props are equal: that is, if the component will
render the same output and behave in the same way with the new props as with the old.
I need to use this function as state objects that are passed as props will always have different references.
This commit is contained in:
Mose Müller
2024-07-08 15:14:26 +02:00
parent 7d50bd5759
commit 34eb4a0e7c
6 changed files with 125 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/EnumComponent.tsx
View File

@ -3,6 +3,7 @@ import { InputGroup, Form, Row, Col } from "react-bootstrap";
import { DocStringComponent } from "./DocStringComponent";
import { LevelName } from "./NotificationsComponent";
import { SerializedObject, SerializedEnum } from "../types/SerializedObject";
import { propsAreEqual } from "../utils/propsAreEqual";
import { useRenderCount } from "../hooks/useRenderCount";
interface EnumComponentProps extends SerializedEnum {
@ -82,6 +83,6 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
</Row>
</div>
);
});
}, propsAreEqual);
EnumComponent.displayName = "EnumComponent";

3
frontend/src/components/MethodComponent.tsx
View File

@ -4,6 +4,7 @@ import { Button, Form } from "react-bootstrap";
import { DocStringComponent } from "./DocStringComponent";
import { LevelName } from "./NotificationsComponent";
import { useRenderCount } from "../hooks/useRenderCount";
import { propsAreEqual } from "../utils/propsAreEqual";
interface MethodProps {
fullAccessPath: string;
@ -49,6 +50,6 @@ export const MethodComponent = React.memo((props: MethodProps) => {
</Form>
</div>
);
});
}, propsAreEqual);
MethodComponent.displayName = "MethodComponent";

3
frontend/src/components/SliderComponent.tsx
View File

@ -6,6 +6,7 @@ import { NumberComponent, NumberObject } from "./NumberComponent";
import { LevelName } from "./NotificationsComponent";
import { SerializedObject } from "../types/SerializedObject";
import { QuantityMap } from "../types/QuantityMap";
import { propsAreEqual } from "../utils/propsAreEqual";
import { useRenderCount } from "../hooks/useRenderCount";
interface SliderComponentProps {
@ -244,6 +245,6 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
</Collapse>
</div>
);
});
}, propsAreEqual);
SliderComponent.displayName = "SliderComponent";