fix: ErrorList shaking (#36358)

* fix: ErrorList shaking

* fix: React 18 test case

components/config-provider/__tests__/form.test.js

@@ -51,6 +51,10 @@ describe('ConfigProvider.Form', () => {
         await Promise.resolve();
       });
 
+      act(() => {
+        jest.runAllTimers();
+      });
+
       expect(container.querySelector('.ant-form-item-explain')).toHaveTextContent('请输入姓名');
     });
 
@@ -70,6 +74,10 @@ describe('ConfigProvider.Form', () => {
         await Promise.resolve();
       });
 
+      act(() => {
+        jest.runAllTimers();
+      });
+
       const explains = Array.from(container.querySelectorAll('.ant-form-item-explain'));
 
       expect(explains[0]).toHaveTextContent('必须');

components/form/ErrorList.tsx

@@ -5,6 +5,7 @@ import { ConfigContext } from '../config-provider';
 import collapseMotion from '../_util/motion';
 import { FormItemPrefixContext } from './context';
 import type { ValidateStatus } from './FormItem';
+import useDebounce from './hooks/useDebounce';
 
 const EMPTY_LIST: React.ReactNode[] = [];
 
@@ -48,16 +49,23 @@ export default function ErrorList({
   const baseClassName = `${prefixCls}-item-explain`;
   const rootPrefixCls = getPrefixCls();
 
+  // We have to debounce here again since somewhere use ErrorList directly still need no shaking
+  // ref: https://github.com/ant-design/ant-design/issues/36336
+  const debounceErrors = useDebounce(errors);
+  const debounceWarnings = useDebounce(warnings);
+
   const fullKeyList = React.useMemo(() => {
     if (help !== undefined && help !== null) {
       return [toErrorEntity(help, helpStatus, 'help')];
     }
 
     return [
-      ...errors.map((error, index) => toErrorEntity(error, 'error', 'error', index)),
-      ...warnings.map((warning, index) => toErrorEntity(warning, 'warning', 'warning', index)),
+      ...debounceErrors.map((error, index) => toErrorEntity(error, 'error', 'error', index)),
+      ...debounceWarnings.map((warning, index) =>
+        toErrorEntity(warning, 'warning', 'warning', index),
+      ),
     ];
-  }, [help, helpStatus, errors, warnings]);
+  }, [help, helpStatus, debounceErrors, debounceWarnings]);
 
   return (
     <CSSMotion

components/form/__tests__/list.test.js

@@ -185,6 +185,10 @@ describe('Form.List', () => {
         await sleep(100);
         jest.runAllTimers();
       });
+
+      act(() => {
+        jest.runAllTimers();
+      });
     }
 
     await addItem();