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

frontend/src/components/component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 interface ComponentProps {
   name: string;
@@ -18,48 +18,60 @@ export const ComponentLabel = ({
   return <label title={docString}>{name}</label>;
 };
 
-export const Component = ({
-  name,
-  value,
-  readOnly,
-  type,
-  docString
-}: ComponentProps) => {
-  switch (type) {
-    case 'int':
-    case 'float':
-      return (
-        <input
-          type="number"
-          name={name}
-          value={value}
-          readOnly={readOnly}
-          title={docString}
-        />
-      );
-    case 'str':
-      return (
-        <input
-          type="text"
-          name={name}
-          value={value}
-          readOnly={readOnly}
-          title={docString}
-        />
-      );
-    case 'bool':
-      return (
-        <input
-          type="checkbox"
-          name={name}
-          checked={value}
-          disabled={readOnly}
-          title={docString}
-        />
-      );
-    case 'method':
-      return <p>Method: {name}</p>;
-    default:
-      return <p>Unsupported type: {type}</p>;
+export const Component = React.memo(
+  ({ name, value, readOnly, type, docString }: ComponentProps) => {
+    const renderCount = useRef(0);
+
+    useEffect(() => {
+      renderCount.current++;
+    });
+    switch (type) {
+      case 'int':
+      case 'float':
+        return (
+          <>
+            <p>Render count: {renderCount.current}</p>
+            <input
+              type="number"
+              name={name}
+              value={value}
+              readOnly={readOnly}
+              title={docString}
+            />
+          </>
+        );
+      case 'str':
+        return (
+          <>
+            <p>Render count: {renderCount.current}</p>
+            <input
+              type="text"
+              name={name}
+              value={value}
+              readOnly={readOnly}
+              title={docString}
+            />
+          </>
+        );
+      case 'bool':
+        return (
+          <input
+            type="checkbox"
+            name={name}
+            checked={value}
+            disabled={readOnly}
+            title={docString}
+          />
+        );
+      case 'method':
+        return (
+          <>
+            <p>Render count: {renderCount.current}</p>
+            <p>Method: {name}</p>
+          </>
+        );
+      default:
+        return <p>Unsupported type: {type}</p>;
+    }
   }
-};
+);