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

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.

frontend/src/components/EnumComponent.tsx

@@ -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";

frontend/src/components/MethodComponent.tsx

@@ -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";

frontend/src/components/SliderComponent.tsx

@@ -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";

frontend/src/utils/propsAreEqual.ts

@@ -0,0 +1,17 @@
+import deepEqual from "deep-equal";
+
+export const propsAreEqual = <T extends object>(
+  prevProps: T,
+  nextProps: T,
+): boolean => {
+  for (const key in nextProps) {
+    if (typeof nextProps[key] === "object") {
+      if (!deepEqual(prevProps[key], nextProps[key])) {
+        return false;
+      }
+    } else if (!Object.is(prevProps[key], nextProps[key])) {
+      return false;
+    }
+  }
+  return true;
+};