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/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" && (
-        <div>Render count: {renderCount.current}</div>
-      )}
+      {process.env.NODE_ENV === "development" && <div>Render count: {renderCount}</div>}
       <DocStringComponent docString={docString} />
       {valueArray.map((item) => {
         return (