Feat: Install why-did-you-render to detect component updates #3221 (#7969)

### What problem does this PR solve?

Feat: Install why-did-you-render to detect component updates #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/app.tsx

@@ -39,6 +39,15 @@ const AntLanguageMap = {
   de: deDE,
 };
 
+if (process.env.NODE_ENV === 'development') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+    trackExtraHooks: [],
+    logOnDifferentValues: true,
+  });
+}
+
 const queryClient = new QueryClient();
 
 type Locale = ConfigProviderProps['locale'];

web/src/components/ui/form.tsx

@@ -73,7 +73,7 @@ const useFormField = () => {
   };
 };
 
-const FormItem = React.forwardRef<
+const InnerFormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
@@ -85,7 +85,10 @@ const FormItem = React.forwardRef<
     </FormItemContext.Provider>
   );
 });
-FormItem.displayName = 'FormItem';
+
+InnerFormItem.displayName = 'FormItem';
+
+const FormItem = React.memo(InnerFormItem);
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,

web/src/components/ui/input.tsx

@@ -103,6 +103,10 @@ export const InnerBlurInput = React.forwardRef<
   );
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  InnerBlurInput.whyDidYouRender = true;
+}
+
 export const BlurInput = React.memo(InnerBlurInput);
 
 export { ExpandedInput, Input, SearchInput };

web/src/pages/agent/form/categorize-form/dynamic-categorize.tsx

@@ -11,7 +11,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
+import { BlurInput, Input } from '@/components/ui/input';
 import { BlurTextarea } from '@/components/ui/textarea';
 import { useTranslate } from '@/hooks/common-hooks';
 import { PlusOutlined } from '@ant-design/icons';
@@ -55,7 +55,7 @@ const getOtherFieldValues = (
         x !== form.getValues(`${formListName}.${index}.${latestField}`),
     );
 
-const NameInput = ({
+const InnerNameInput = ({
   value,
   onChange,
   otherNames,
@@ -104,6 +104,8 @@ const NameInput = ({
   );
 };
 
+const NameInput = memo(InnerNameInput);
+
 const InnerFormSet = ({ nodeId, index }: IProps & { index: number }) => {
   const form = useFormContext();
   const { t } = useTranslate('flow');
@@ -128,7 +130,8 @@ const InnerFormSet = ({ nodeId, index }: IProps & { index: number }) => {
           <FormItem>
             <FormLabel>{t('categoryName')}</FormLabel>
             <FormControl>
-              <NameInput
+              <BlurInput {...field}></BlurInput>
+              {/* <NameInput
                 {...field}
                 otherNames={getOtherFieldValues(form, 'items', index, 'name')}
                 validate={(error?: string) => {
@@ -139,7 +142,7 @@ const InnerFormSet = ({ nodeId, index }: IProps & { index: number }) => {
                     form.clearErrors(fieldName);
                   }
                 }}
-              ></NameInput>
+              ></NameInput> */}
             </FormControl>
             <FormMessage />
           </FormItem>