frontend: introduces useRenderCount hook

The useRenderCount hook contains all the necessary logic to count the re-render events.
This reduces duplication and code complexity.

frontend/src/components/AsyncMethodComponent.tsx

@@ -3,6 +3,7 @@ import { runMethod } from "../socket";
 import { Form, Button, InputGroup, Spinner } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import { LevelName } from "./NotificationsComponent";
+import { useRenderCount } from "../hooks/useRenderCount";
 
 interface AsyncMethodProps {
   fullAccessPath: string;
@@ -30,14 +31,13 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
     return null;
   }
 
-  const renderCount = useRef(0);
+  const renderCount = useRenderCount();
   const formRef = useRef(null);
   const [spinning, setSpinning] = useState(false);
   const name = fullAccessPath.split(".").at(-1)!;
   const parentPath = fullAccessPath.slice(0, -(name.length + 1));
 
   useEffect(() => {
-    renderCount.current++;
     let message: string;
 
     if (runningTask === null) {
@@ -66,9 +66,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
 
   return (
     <div className="component asyncMethodComponent" id={id}>
-      {process.env.NODE_ENV === "development" && (
+      {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
-        <div>Render count: {renderCount.current}</div>
-      )}
       <Form onSubmit={execute} ref={formRef}>
         <InputGroup>
           <InputGroup.Text>

frontend/src/components/ButtonComponent.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect } from "react";
 import { ToggleButton } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
+import { useRenderCount } from "../hooks/useRenderCount";
 
 interface ButtonComponentProps {
   fullAccessPath: string;
@@ -29,11 +30,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   } = props;
   // const buttonName = props.mapping ? (value ? props.mapping[0] : props.mapping[1]) : name;
 
-  const renderCount = useRef(0);
+  const renderCount = useRenderCount();
-
-  useEffect(() => {
-    renderCount.current++;
-  });
 
   useEffect(() => {
     addNotification(`${fullAccessPath} changed to ${value}.`);
@@ -51,9 +48,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
 
   return (
     <div className={"component buttonComponent"} id={id}>
-      {process.env.NODE_ENV === "development" && (
+      {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
-        <div>Render count: {renderCount.current}</div>
-      )}
 
       <ToggleButton
         id={`toggle-check-${id}`}

frontend/src/components/DictComponent.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { DocStringComponent } from "./DocStringComponent";
 import { GenericComponent } from "./GenericComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
+import { useRenderCount } from "../hooks/useRenderCount";
 
 interface DictComponentProps {
   value: Record<string, SerializedObject>;
@@ -15,18 +16,12 @@ interface DictComponentProps {
 export const DictComponent = React.memo((props: DictComponentProps) => {
   const { value, docString, isInstantUpdate, addNotification, id } = props;
 
-  const renderCount = useRef(0);
+  const renderCount = useRenderCount();
   const valueArray = Object.values(value);
 
-  useEffect(() => {
-    renderCount.current++;
-  }, [props]);
-
   return (
     <div className={"listComponent"} id={id}>
-      {process.env.NODE_ENV === "development" && (
+      {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
-        <div>Render count: {renderCount.current}</div>
-      )}
       <DocStringComponent docString={docString} />
       {valueArray.map((item) => {
         return (

frontend/src/components/EnumComponent.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect } from "react";
 import { InputGroup, Form, Row, Col } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
+import { useRenderCount } from "../hooks/useRenderCount";
 
 export interface EnumSerialization {
   type: "Enum" | "ColouredEnum";
@@ -40,12 +41,8 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
       });
     };
   }
-  const renderCount = useRef(0);
   const [enumValue, setEnumValue] = useState(value);
-
+  const renderCount = useRenderCount();
-  useEffect(() => {
-    renderCount.current++;
-  });
 
   useEffect(() => {
     setEnumValue(() => {
@@ -56,9 +53,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
 
   return (
     <div className={"component enumComponent"} id={id}>
-      {process.env.NODE_ENV === "development" && (
+      {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
-        <div>Render count: {renderCount.current}</div>
-      )}
       <Row>
         <Col className="d-flex align-items-center">
           <InputGroup.Text>

frontend/src/components/ImageComponent.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Card, Collapse, Image } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import { ChevronDown, ChevronRight } from "react-bootstrap-icons";
 import { LevelName } from "./NotificationsComponent";
+import { useRenderCount } from "../hooks/useRenderCount";
 
 interface ImageComponentProps {
   fullAccessPath: string;
@@ -18,13 +19,9 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
   const { fullAccessPath, value, docString, format, addNotification, displayName, id } =
     props;
 
-  const renderCount = useRef(0);
+  const renderCount = useRenderCount();
   const [open, setOpen] = useState(true);
 
-  useEffect(() => {
-    renderCount.current++;
-  });
-
   useEffect(() => {
     addNotification(`${fullAccessPath} changed.`);
   }, [props.value]);
@@ -43,7 +40,7 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
         <Collapse in={open}>
           <Card.Body>
             {process.env.NODE_ENV === "development" && (
-              <p>Render count: {renderCount.current}</p>
+              <p>Render count: {renderCount}</p>
             )}
             {format === "" && value === "" ? (
               <p>No image set in the backend.</p>

frontend/src/components/ListComponent.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { DocStringComponent } from "./DocStringComponent";
 import { GenericComponent } from "./GenericComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
+import { useRenderCount } from "../hooks/useRenderCount";
 
 interface ListComponentProps {
   value: SerializedObject[];
@@ -15,17 +16,11 @@ interface ListComponentProps {
 export const ListComponent = React.memo((props: ListComponentProps) => {
   const { value, docString, isInstantUpdate, addNotification, id } = props;
 
-  const renderCount = useRef(0);
+  const renderCount = useRenderCount();
-
-  useEffect(() => {
-    renderCount.current++;
-  }, [props]);
 
   return (
     <div className={"listComponent"} id={id}>
-      {process.env.NODE_ENV === "development" && (
+      {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
-        <div>Render count: {renderCount.current}</div>
-      )}
       <DocStringComponent docString={docString} />
       {value.map((item) => {
         return (

frontend/src/components/MethodComponent.tsx

@@ -3,6 +3,7 @@ import { runMethod } from "../socket";
 import { Button, Form } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import { LevelName } from "./NotificationsComponent";
+import { useRenderCount } from "../hooks/useRenderCount";
 
 interface MethodProps {
   fullAccessPath: string;
@@ -21,7 +22,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
     return null;
   }
 
-  const renderCount = useRef(0);
+  const renderCount = useRenderCount();
   const formRef = useRef(null);
 
   const triggerNotification = () => {
@@ -37,15 +38,9 @@ export const MethodComponent = React.memo((props: MethodProps) => {
     triggerNotification();
   };
 
-  useEffect(() => {
-    renderCount.current++;
-  });
-
   return (
     <div className="component methodComponent" id={id}>
-      {process.env.NODE_ENV === "development" && (
+      {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
-        <div>Render count: {renderCount.current}</div>
-      )}
       <Form onSubmit={execute} ref={formRef}>
         <Button className="component" variant="primary" type="submit">
           {`${displayName} `}

frontend/src/components/NumberComponent.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState } from "react";
 import { Form, InputGroup } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import "../App.css";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 import { QuantityMap } from "../types/QuantityMap";
+import { useRenderCount } from "../hooks/useRenderCount";
 
 // TODO: add button functionality
 
@@ -171,7 +172,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   const [cursorPosition, setCursorPosition] = useState<number | null>(null);
   // Create a state for the input string
   const [inputString, setInputString] = useState(value.toString());
-  const renderCount = useRef(0);
+  const renderCount = useRenderCount();
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const { key, target } = event;
@@ -365,9 +366,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
 
   return (
     <div className="component numberComponent" id={id}>
-      {process.env.NODE_ENV === "development" && (
+      {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
-        <div>Render count: {renderCount.current}</div>
-      )}
       <InputGroup>
         {displayName && (
           <InputGroup.Text>

frontend/src/components/SliderComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { InputGroup, Form, Row, Col, Collapse, ToggleButton } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import { Slider } from "@mui/material";
@@ -6,6 +6,7 @@ import { NumberComponent, NumberObject } from "./NumberComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 import { QuantityMap } from "../types/QuantityMap";
+import { useRenderCount } from "../hooks/useRenderCount";
 
 interface SliderComponentProps {
   fullAccessPath: string;
@@ -23,7 +24,7 @@ interface SliderComponentProps {
 }
 
 export const SliderComponent = React.memo((props: SliderComponentProps) => {
-  const renderCount = useRef(0);
+  const renderCount = useRenderCount();
   const [open, setOpen] = useState(false);
   const {
     fullAccessPath,
@@ -39,10 +40,6 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     id,
   } = props;
 
-  useEffect(() => {
-    renderCount.current++;
-  });
-
   useEffect(() => {
     addNotification(`${fullAccessPath} changed to ${value.value}.`);
   }, [props.value]);
@@ -143,9 +140,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
 
   return (
     <div className="component sliderComponent" id={id}>
-      {process.env.NODE_ENV === "development" && (
+      {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
-        <div>Render count: {renderCount.current}</div>
-      )}
 
       <Row>
         <Col xs="auto" xl="auto">

frontend/src/components/StringComponent.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Form, InputGroup } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import "../App.css";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
+import { useRenderCount } from "../hooks/useRenderCount";
 
 // TODO: add button functionality
 
@@ -31,13 +32,9 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
     id,
   } = props;
 
-  const renderCount = useRef(0);
+  const renderCount = useRenderCount();
   const [inputString, setInputString] = useState(props.value);
 
-  useEffect(() => {
-    renderCount.current++;
-  }, [isInstantUpdate, inputString, renderCount]);
-
   useEffect(() => {
     // Only update the inputString if it's different from the prop value
     if (props.value !== inputString) {
@@ -86,9 +83,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
 
   return (
     <div className="component stringComponent" id={id}>
-      {process.env.NODE_ENV === "development" && (
+      {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
-        <div>Render count: {renderCount.current}</div>
-      )}
       <InputGroup>
         <InputGroup.Text>
           {displayName}

frontend/src/hooks/useRenderCount.ts

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from "react";
+
+export function useRenderCount() {
+  const count = useRef(0);
+
+  useEffect(() => {
+    count.current += 1;
+  });
+
+  return count.current;
+}