updating components

- using React.memo, removing React.forwardRef
- adding renderCount (to see which components are re-rendered)
- using ToggleButton instead of Button (might change again)

frontend/src/components/button.tsx

@@ -1,5 +1,5 @@
-import React, { MouseEventHandler } from 'react';
+import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
-import { OverlayTrigger, Badge, Button, Tooltip } from 'react-bootstrap';
+import { OverlayTrigger, Badge, Button, Tooltip, ToggleButton } from 'react-bootstrap';
 
 interface ButtonComponentProps {
   name: string;
@@ -11,8 +11,14 @@ interface ButtonComponentProps {
   mapping?: [string, string]; // Enforce a tuple of two strings
 }
 
-const ButtonComponentRef = React.forwardRef<HTMLDivElement, ButtonComponentProps>(
+export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
-  (props, ref) => {
+  const renderCount = useRef(0);
+
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    renderCount.current++;
+  });
   const { name, fullname, value, readOnly, docString, onToggle, mapping } = props;
 
   const buttonName = mapping ? (value ? mapping[0] : mapping[1]) : name;
@@ -20,14 +26,20 @@ const ButtonComponentRef = React.forwardRef<HTMLDivElement, ButtonComponentProps
   const tooltip = <Tooltip id="tooltip">{docString}</Tooltip>;
 
   return (
-      <div className={'component boolean'} id={fullname} ref={ref}>
+    <div className={'component boolean'} id={fullname}>
-        <Button
+      <p>Render count: {renderCount.current}</p>
-          type={'button'}
+      <ToggleButton
-          variant={value ? 'success' : 'secondary'}
+        id="toggle-check"
+        type="checkbox"
+        // variant="secondary"
+        variant={checked ? 'success' : 'secondary'}
+        checked={checked}
+        value={fullname}
         onMouseUp={onToggle}
-          disabled={readOnly}>
+        disabled={readOnly}
+        onChange={(e) => setChecked(e.currentTarget.checked)}>
         <p>{buttonName}</p>
-        </Button>
+      </ToggleButton>
 
       {docString && (
         <OverlayTrigger placement="bottom" overlay={tooltip}>
@@ -38,7 +50,4 @@ const ButtonComponentRef = React.forwardRef<HTMLDivElement, ButtonComponentProps
       )}
     </div>
   );
-  }
+});
-);
-
-export const ButtonComponent = React.memo(ButtonComponentRef);

frontend/src/components/component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 interface ComponentProps {
   name: string;
@@ -18,17 +18,19 @@ export const ComponentLabel = ({
   return <label title={docString}>{name}</label>;
 };
 
-export const Component = ({
+export const Component = React.memo(
-  name,
+  ({ name, value, readOnly, type, docString }: ComponentProps) => {
-  value,
+    const renderCount = useRef(0);
-  readOnly,
+
-  type,
+    useEffect(() => {
-  docString
+      renderCount.current++;
-}: ComponentProps) => {
+    });
     switch (type) {
       case 'int':
       case 'float':
         return (
+          <>
+            <p>Render count: {renderCount.current}</p>
             <input
               type="number"
               name={name}
@@ -36,9 +38,12 @@ export const Component = ({
               readOnly={readOnly}
               title={docString}
             />
+          </>
         );
       case 'str':
         return (
+          <>
+            <p>Render count: {renderCount.current}</p>
             <input
               type="text"
               name={name}
@@ -46,6 +51,7 @@ export const Component = ({
               readOnly={readOnly}
               title={docString}
             />
+          </>
         );
       case 'bool':
         return (
@@ -58,8 +64,14 @@ export const Component = ({
           />
         );
       case 'method':
-      return <p>Method: {name}</p>;
+        return (
+          <>
+            <p>Render count: {renderCount.current}</p>
+            <p>Method: {name}</p>
+          </>
+        );
       default:
         return <p>Unsupported type: {type}</p>;
     }
-};
+  }
+);