fix: ColorPicker default clear value should change if set (#48450)

* fix: ColorPicker default clear value should change if set

* chore: code clean

---------

Co-authored-by: afc163 <afc163@gmail.com>

components/color-picker/__tests__/index.test.tsx

@@ -698,4 +698,30 @@ describe('ColorPicker', () => {
       container.querySelector('.ant-color-picker-trigger .ant-color-picker-clear'),
     ).toBeFalsy();
   });
+
+  describe('default clearValue should be changed', () => {
+    const Demo = () => {
+      const [color, setColor] = useState<string>('');
+      useEffect(() => {
+        setColor('#1677ff');
+      }, []);
+      return <ColorPicker value={color} allowClear />;
+    };
+
+    it('normal', () => {
+      const { container } = render(<Demo />);
+
+      expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
+    });
+
+    it('strict', () => {
+      const { container } = render(
+        <React.StrictMode>
+          <Demo />
+        </React.StrictMode>,
+      );
+
+      expect(container.querySelector('.ant-color-picker-clear')).toBeFalsy();
+    });
+  });
 });

components/color-picker/hooks/useColorState.ts

@@ -4,6 +4,8 @@ import type { Color } from '../color';
 import type { ColorValueType } from '../interface';
 import { generateColor } from '../util';
 
+const INIT_COLOR_REF = {} as ColorValueType;
+
 function hasValue(value?: ColorValueType) {
   return value !== undefined;
 }
@@ -33,7 +35,14 @@ const useColorState = (
     prevColor.current = color;
   };
 
+  const prevValue = useRef<ColorValueType | undefined>(INIT_COLOR_REF);
   useEffect(() => {
+    // `useEffect` will be executed twice in strict mode even if the deps are the same
+    // So we compare the value manually to avoid unnecessary update
+    if (prevValue.current === value) {
+      return;
+    }
+    prevValue.current = value;
     if (hasValue(value)) {
       const newColor = generateColor(value || '');
       if (prevColor.current.cleared === true) {