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/package-lock.json

@@ -112,6 +112,7 @@
         "@types/webpack-env": "^1.18.4",
         "@umijs/lint": "^4.1.1",
         "@umijs/plugins": "^4.1.0",
+        "@welldone-software/why-did-you-render": "^8.0.3",
         "cross-env": "^7.0.3",
         "html-loader": "^5.1.0",
         "husky": "^9.0.11",
@@ -11187,6 +11188,19 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@welldone-software/why-did-you-render": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmmirror.com/@welldone-software/why-did-you-render/-/why-did-you-render-8.0.3.tgz",
+      "integrity": "sha512-bb5bKPMStYnocyTBVBu4UTegZdBqzV1mPhxc0UIV/S43KFUSRflux9gvzJfu2aM4EWLJ3egTvdjOi+viK+LKGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4"
+      },
+      "peerDependencies": {
+        "react": "^18"
+      }
+    },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.10",
       "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",

web/package.json

@@ -123,6 +123,7 @@
     "@types/webpack-env": "^1.18.4",
     "@umijs/lint": "^4.1.1",
     "@umijs/plugins": "^4.1.0",
+    "@welldone-software/why-did-you-render": "^8.0.3",
     "cross-env": "^7.0.3",
     "html-loader": "^5.1.0",
     "husky": "^9.0.11",

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>