Optimize React components with memo, useMemo, useCallback

- FormBuilder: Fix state mutation, memoize expensive computations
- Card: Add React.memo, useCallback for event handlers
- Section: Add React.memo, useMemo, useCallback throughout
- CardModal: Add React.memo, useCallback for handlers
- Add: Add React.memo, useCallback for handlers
- CardEnumOptions: Fix module-level ID counter, add React.memo
- CardGeneralParameterInputs: Add React.memo, memoize functions
- PredefinedGallery: Fix state mutation, add memoization
- Collapse, FBCheckbox, FBRadioGroup, FBRadioButton: Add React.memo
- PlaygroundContainer: Add useCallback for onChange

All components now follow React best practices:
- Immutable state updates
- Memoized expensive computations
- Stable callback references
- Pure functional components wrapped in memo()

Author: raymond-lam

example/components/PlaygroundContainer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 
 import JsonSchemaFormSuite from './JsonSchemaFormSuite';
 import Box from '@mui/material/Box';
@@ -45,10 +45,19 @@ const theme = createTheme({
 });
 
 export default function PlaygroundContainer({ title }: { title: string }) {
-  const [schema, setSchema] = React.useState(JSON.stringify(initialJsonSchema));
-  const [uischema, setUischema] = React.useState(
+  const [schema, setSchema] = useState(() => JSON.stringify(initialJsonSchema));
+  const [uischema, setUischema] = useState(() =>
     JSON.stringify(initialUiSchema),
   );
+
+  const handleChange = useCallback(
+    (newSchema: string, newUiSchema: string) => {
+      setSchema(newSchema);
+      setUischema(newUiSchema);
+    },
+    [],
+  );
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
@@ -111,10 +120,7 @@ export default function PlaygroundContainer({ title }: { title: string }) {
               mods={mods}
               schemaTitle="Data Schema"
               uischemaTitle="UI Schema"
-              onChange={(newSchema: string, newUiSchema: string) => {
-                setSchema(newSchema);
-                setUischema(newUiSchema);
-              }}
+              onChange={handleChange}
               width="100%"
               height="750px"
             />

src/formBuilder/Add.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactElement } from 'react';
+import React, { useState, ReactElement, useCallback, memo } from 'react';
 import Popover from '@mui/material/Popover';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
@@ -11,7 +11,7 @@ import FBRadioGroup from './radio/FBRadioGroup';
 import { getRandomId } from './utils';
 import type { ModLabels } from './types';
 
-export default function Add({
+function Add({
   addElem,
   hidden,
   tooltipDescription,
@@ -24,16 +24,36 @@ export default function Add({
 }): ReactElement {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [createChoice, setCreateChoice] = useState('card');
-  const [elementId] = useState(getRandomId());
+  const [elementId] = useState(getRandomId);
   const [isHovered, setIsHovered] = useState(false);
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    },
+    [],
+  );
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     setAnchorEl(null);
-  };
+  }, []);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  const handleChoiceChange = useCallback((selection: string) => {
+    setCreateChoice(selection);
+  }, []);
+
+  const handleCreate = useCallback(() => {
+    addElem(createChoice);
+    setAnchorEl(null);
+  }, [addElem, createChoice]);
 
   const open = Boolean(anchorEl);
 
@@ -48,8 +68,8 @@ export default function Add({
         py: 1,
         my: 0.5,
       }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
       <Tooltip title={tooltipDescription || 'Add element here'} placement='top'>
         <IconButton
@@ -101,9 +121,7 @@ export default function Add({
                 label: labels?.addSectionLabel ?? 'Form section',
               },
             ]}
-            onChange={(selection) => {
-              setCreateChoice(selection);
-            }}
+            onChange={handleChoiceChange}
           />
           <Stack
             direction='row'
@@ -120,10 +138,7 @@ export default function Add({
               Cancel
             </Button>
             <Button
-              onClick={() => {
-                addElem(createChoice);
-                handleClose();
-              }}
+              onClick={handleCreate}
               variant='contained'
               color='primary'
               size='small'
@@ -136,3 +151,5 @@ export default function Add({
     </Box>
   );
 }
+
+export default memo(Add);

src/formBuilder/Card.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, memo, useCallback, useState } from 'react';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
@@ -16,7 +16,7 @@ import TooltipComponent from './Tooltip';
 import { getRandomId } from './utils';
 import type { CardPropsType, CardComponentPropsType } from './types';
 
-export default function Card({
+function Card({
   componentProps,
   onChange,
   onDelete,
@@ -31,19 +31,72 @@ export default function Card({
   showObjectNameInput = true,
   addProperties,
 }: CardPropsType): ReactElement {
-  const [modalOpen, setModalOpen] = React.useState(false);
-  const [elementId] = React.useState(getRandomId());
+  const [modalOpen, setModalOpen] = useState(false);
+  const [elementId] = useState(getRandomId);
+
+  const handleToggleCollapse = useCallback(() => {
+    setCardOpen(!cardOpen);
+  }, [cardOpen, setCardOpen]);
+
+  const handleModalOpen = useCallback(() => {
+    setModalOpen(true);
+  }, []);
+
+  const handleModalClose = useCallback(() => {
+    setModalOpen(false);
+  }, []);
+
+  const handleRequiredToggle = useCallback(() => {
+    onChange({
+      ...componentProps,
+      required: !componentProps.required,
+    });
+  }, [componentProps, onChange]);
+
+  const handleMoveUp = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onMoveUp?.();
+    },
+    [onMoveUp],
+  );
+
+  const handleMoveDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onMoveDown?.();
+    },
+    [onMoveDown],
+  );
+
+  const handleDelete = useCallback(() => {
+    onDelete?.();
+  }, [onDelete]);
+
+  const handleModalSave = useCallback(
+    (newComponentProps: CardComponentPropsType) => {
+      onChange(newComponentProps);
+    },
+    [onChange],
+  );
+
+  const handleAddElem = useCallback(
+    (choice: string) => {
+      addElem?.(choice);
+    },
+    [addElem],
+  );
 
   return (
     <React.Fragment>
       <Collapse
         isOpen={cardOpen}
-        toggleCollapse={() => setCardOpen(!cardOpen)}
+        toggleCollapse={handleToggleCollapse}
         title={
           <React.Fragment>
             <Box
               component='span'
-              onClick={() => setCardOpen(!cardOpen)}
+              onClick={handleToggleCollapse}
               sx={{
                 cursor: 'pointer',
                 display: 'flex',
@@ -71,10 +124,7 @@ export default function Card({
               <Tooltip title='Move form element up' placement='top'>
                 <IconButton
                   size='small'
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onMoveUp?.();
-                  }}
+                  onClick={handleMoveUp}
                   id={`${elementId}_moveupbiginfo`}
                   aria-label='Move form element up'
                 >
@@ -84,10 +134,7 @@ export default function Card({
               <Tooltip title='Move form element down' placement='top'>
                 <IconButton
                   size='small'
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onMoveDown?.();
-                  }}
+                  onClick={handleMoveDown}
                   id={`${elementId}_movedownbiginfo`}
                   aria-label='Move form element down'
                 >
@@ -116,7 +163,7 @@ export default function Card({
             >
               <IconButton
                 size='small'
-                onClick={() => setModalOpen(true)}
+                onClick={handleModalOpen}
                 id={`${elementId}_editinfo`}
                 color='primary'
                 aria-label='Additional configurations'
@@ -127,7 +174,7 @@ export default function Card({
             <Tooltip title='Delete form element' placement='top'>
               <IconButton
                 size='small'
-                onClick={() => onDelete?.()}
+                onClick={handleDelete}
                 id={`${elementId}_trashinfo`}
                 color='error'
                 aria-label='Delete form element'
@@ -146,12 +193,7 @@ export default function Card({
             }}
           >
             <FBCheckbox
-              onChangeValue={() =>
-                onChange({
-                  ...componentProps,
-                  required: !componentProps.required,
-                })
-              }
+              onChangeValue={handleRequiredToggle}
               isChecked={!!componentProps.required}
               label='Required'
               id={`${elementId}_required`}
@@ -161,20 +203,20 @@ export default function Card({
         <CardModal
           componentProps={componentProps as CardComponentPropsType}
           isOpen={modalOpen}
-          onClose={() => setModalOpen(false)}
-          onChange={(newComponentProps: CardComponentPropsType) => {
-            onChange(newComponentProps);
-          }}
+          onClose={handleModalClose}
+          onChange={handleModalSave}
           TypeSpecificParameters={TypeSpecificParameters}
         />
       </Collapse>
       {mods?.components?.add && mods?.components?.add(addProperties)}
       {!mods?.components?.add && addElem && (
         <Add
           tooltipDescription={((mods || {}).tooltipDescriptions || {}).add}
-          addElem={(choice: string) => addElem(choice)}
+          addElem={handleAddElem}
         />
       )}
     </React.Fragment>
   );
 }
+
+export default memo(Card);