cleanup and callback

Author: paula-stacho

src/components/field/field.tsx

@@ -4,7 +4,7 @@ import { palette } from '@leafygreen-ui/palette';
 import Icon from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { useTheme } from '@emotion/react';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { animatedBlueBorder, ellipsisTruncation } from '@/styles/styles';
 import { DEFAULT_DEPTH_SPACING, DEFAULT_FIELD_HEIGHT } from '@/utilities/constants';
@@ -210,18 +210,19 @@ export const Field = ({
     return internalTheme.node.mongoDBAccent;
   };
 
+  const handleNameChange = useCallback(
+    (newName: string) => onChangeFieldName?.(nodeId, Array.isArray(id) ? id : [id], newName),
+    [onChangeFieldName, id, nodeId],
+  );
+
   const content = (
     <>
       <FieldName>
         <FieldDepth depth={depth} />
         <FieldNameContent
           name={name}
           isEditable={editable}
-          onChange={
-            onChangeFieldName
-              ? (newName: string) => onChangeFieldName(nodeId, Array.isArray(id) ? id : [id], newName)
-              : undefined
-          }
+          onChange={onChangeFieldName ? handleNameChange : undefined}
         />
       </FieldName>
       <FieldType color={getSecondaryTextColor()}>

src/mocks/decorators/diagram-editable-interactions.decorator.tsx

@@ -54,7 +54,6 @@ function renameField(existingFields: NodeField[], fieldPath: string[], newName:
     if (JSON.stringify(field.id) !== JSON.stringify(fieldPath)) return field;
     return { ...field, name: newName, id: [...fieldPath.slice(0, -1), newName] };
   });
-  console.log('Renamed fields:', fields);
   return fields;
 }