refactor: replace useMergedState with useControlledState for improved state management

- Updated multiple components to utilize useControlledState instead of useMergedState for better control over state updates.
- Refactored state handling in Card, CheckCard, and various form components to enhance performance and maintainability.
- Adjusted callback functions to ensure proper state synchronization with parent components.
- Improved overall code readability and consistency across the codebase.

Author: chenshuai2144

src/card/components/Card/index.tsx

@@ -1,8 +1,8 @@
 import { RightOutlined } from '@ant-design/icons';
-import { omit, useMergedState } from '@rc-component/util';
+import { omit, useControlledState } from '@rc-component/util';
 import { ConfigProvider, Grid, Tabs } from 'antd';
 import { clsx } from 'clsx';
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import { LabelIconTip } from '../../../utils';
 import type { Breakpoint, CardProps, Gutter } from '../../typing';
 import Actions from '../Actions';
@@ -61,10 +61,23 @@ const Card = React.forwardRef((props: CardProps, ref: any) => {
     xxl: false,
   };
 
-  const [collapsed, setCollapsed] = useMergedState<boolean>(defaultCollapsed, {
-    value: controlCollapsed,
-    onChange: onCollapse,
-  });
+  const [collapsed, setCollapsedInner] = useControlledState<boolean>(
+    defaultCollapsed,
+    controlCollapsed,
+  );
+  const setCollapsed = useCallback(
+    (updater: boolean | ((prev: boolean) => boolean)) => {
+      setCollapsedInner((prev) => {
+        const next =
+          typeof updater === 'function'
+            ? (updater as (p: boolean) => boolean)(prev)
+            : updater;
+        onCollapse?.(next);
+        return next;
+      });
+    },
+    [onCollapse],
+  );
 
   // 顺序决定如何进行响应式取值，按最大响应值依次取值，请勿修改。
   const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];

src/card/components/CheckCard/Group.tsx

@@ -1,5 +1,5 @@
 import { RightOutlined } from '@ant-design/icons';
-import { omit, useMergedState } from '@rc-component/util';
+import { omit, useControlledState } from '@rc-component/util';
 import { ConfigProvider, Skeleton } from 'antd';
 import { clsx } from 'clsx';
 import React, {
@@ -317,12 +317,27 @@ const CheckCardGroup: React.FC<CheckCardGroupProps> = (props) => {
     'size',
   ]);
 
-  const [stateValue, setStateValue] = useMergedState<
+  const [stateValue, setStateValueInner] = useControlledState<
     CheckCardValueType[] | CheckCardValueType | undefined
-  >(props.defaultValue, {
-    value: props.value,
-    onChange: props.onChange,
-  });
+  >(props.defaultValue, props.value);
+
+  const setStateValue = useCallback(
+    (
+      updater:
+        | CheckGroupValueType
+        | ((prev: CheckGroupValueType) => CheckGroupValueType),
+    ) => {
+      setStateValueInner((prev) => {
+        const next =
+          typeof updater === 'function'
+            ? (updater as (p: CheckGroupValueType) => CheckGroupValueType)(prev)
+            : updater;
+        onChange?.(next);
+        return next;
+      });
+    },
+    [onChange],
+  );
 
   const registerValueMap = useRef<Map<CheckCardValueType, any>>(new Map());
 

src/card/components/CheckCard/index.tsx

@@ -1,8 +1,8 @@
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import { Avatar, ConfigProvider } from 'antd';
 import { clsx } from 'clsx';
 import type { MouseEventHandler } from 'react';
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import ProCardActions from '../Actions';
 import type { CheckCardGroupProps } from './Group';
 import CheckCardGroup, { CardLoading, CheckCardGroupConnext } from './Group';
@@ -169,12 +169,22 @@ export interface CheckCardState {
 const CheckCard: React.FC<CheckCardProps> & {
   Group: typeof CheckCardGroup;
 } = (props) => {
-  const [stateChecked, setStateChecked] = useMergedState<boolean>(
+  const [stateChecked, setStateCheckedInner] = useControlledState<boolean>(
     props.defaultChecked || false,
-    {
-      value: props.checked,
-      onChange: props.onChange,
+    props.checked,
+  );
+  const setStateChecked = useCallback(
+    (updater: boolean | ((prev: boolean) => boolean)) => {
+      setStateCheckedInner((prev) => {
+        const next =
+          typeof updater === 'function'
+            ? (updater as (p: boolean) => boolean)(prev)
+            : updater;
+        props.onChange?.(next);
+        return next;
+      });
     },
+    [props.onChange],
   );
   const checkCardGroup = useContext(CheckCardGroupConnext);
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);

src/descriptions/useFetchData.tsx

@@ -1,5 +1,5 @@
-import { useMergedState } from '@rc-component/util';
-import { useEffect } from 'react';
+import { useControlledState } from '@rc-component/util';
+import { useCallback, useEffect } from 'react';
 
 export type RequestData<T = any> = {
   data?: T;
@@ -34,16 +34,52 @@ const useFetchData = <T extends RequestData>(
     defaultDataSource,
     onDataSourceChange,
   } = options || {};
-  const [entity, setEntity] = useMergedState<T['data']>(defaultDataSource, {
-    value: dataSource,
-    onChange: onDataSourceChange,
-  });
-  const [loading, setLoading] = useMergedState<boolean | undefined>(
+  const [entity, setEntityInner] = useControlledState<T['data']>(
+    defaultDataSource,
+    dataSource,
+  );
+  const setEntity = useCallback(
+    (
+      updater:
+        | T['data']
+        | ((prev: T['data']) => T['data']),
+    ) => {
+      setEntityInner((prev) => {
+        const next =
+          typeof updater === 'function'
+            ? (updater as (p: T['data']) => T['data'])(prev)
+            : updater;
+        onDataSourceChange?.(next);
+        return next;
+      });
+    },
+    [onDataSourceChange],
+  );
+  const [loading, setLoadingInner] = useControlledState<boolean | undefined>(
+    options?.loading,
     options?.loading,
-    {
-      value: options?.loading,
-      onChange: options?.onLoadingChange,
+  );
+  const setLoading = useCallback(
+    (
+      updater:
+        | boolean
+        | undefined
+        | ((prev: boolean | undefined) => boolean | undefined),
+    ) => {
+      setLoadingInner((prev) => {
+        const next =
+          typeof updater === 'function'
+            ? (
+                updater as (
+                  p: boolean | undefined,
+                ) => boolean | undefined
+              )(prev)
+            : updater;
+        options?.onLoadingChange?.(next);
+        return next;
+      });
     },
+    [options?.onLoadingChange],
   );
 
   const updateDataAndLoading = (data: T) => {

src/field/components/DigitRange/index.tsx

@@ -1,6 +1,6 @@
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import { Input, InputNumber, Space } from 'antd';
-import React, { useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { proTheme, useIntl } from '../../../provider';
 import type { ProFieldFC } from '../../PureProField';
 
@@ -37,10 +37,30 @@ const FieldDigitRange: ProFieldFC<FieldDigitRangeProps> = (
   const intl = useIntl();
 
   const { token } = proTheme.useToken();
-  const [valuePair, setValuePair] = useMergedState(() => defaultValue, {
-    value: value,
-    onChange: onChange,
-  });
+  const [valuePair, setValuePairInner] = useControlledState(
+    () => defaultValue,
+    value,
+  );
+  const setValuePair = useCallback(
+    (
+      updater:
+        | ValuePair
+        | undefined
+        | ((prev: ValuePair | undefined) => ValuePair | undefined),
+    ) => {
+      setValuePairInner((prev) => {
+        const next =
+          typeof updater === 'function'
+            ? (updater as (p: ValuePair | undefined) => ValuePair | undefined)(
+                prev,
+              )
+            : updater;
+        onChange?.(next);
+        return next;
+      });
+    },
+    [onChange],
+  );
   const valuePairRef = useRef(valuePair);
 
   if (type === 'read') {

src/field/components/Money/index.tsx

@@ -1,4 +1,4 @@
-import { omit, useMergedState } from '@rc-component/util';
+import { omit, useControlledState } from '@rc-component/util';
 import type { InputNumberProps } from 'antd';
 import { InputNumber, Popover } from 'antd';
 import React, { useCallback, useMemo } from 'react';
@@ -231,10 +231,23 @@ const InputNumberPopover = React.forwardRef<
     },
     ref,
   ) => {
-    const [value, onChange] = useMergedState<any>(() => rest.defaultValue, {
-      value: rest.value,
-      onChange: rest.onChange,
-    });
+    const [value, setValueInner] = useControlledState<any>(
+      () => rest.defaultValue,
+      rest.value,
+    );
+    const onChange = useCallback(
+      (updater: any | ((prev: any) => any)) => {
+        setValueInner((prev) => {
+          const next =
+            typeof updater === 'function'
+              ? (updater as (p: any) => any)(prev)
+              : updater;
+          rest.onChange?.(next);
+          return next;
+        });
+      },
+      [rest.onChange],
+    );
 
     /**
      * 如果content 存在要根据 content 渲染一下

src/field/components/Password/index.tsx

@@ -1,7 +1,7 @@
 import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import { Input, Space } from 'antd';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useIntl } from '../../../provider';
 import type { ProFieldFC } from '../../PureProField';
 
@@ -20,10 +20,23 @@ const FieldPassword: ProFieldFC<{
 ) => {
   const intl = useIntl();
 
-  const [open, setOpen] = useMergedState<boolean>(() => rest.open || false, {
-    value: rest.open,
-    onChange: rest.onOpenChange,
-  });
+  const [open, setOpenInner] = useControlledState<boolean>(
+    () => rest.open || false,
+    rest.open,
+  );
+  const setOpen = useCallback(
+    (updater: boolean | ((prev: boolean) => boolean)) => {
+      setOpenInner((prev) => {
+        const next =
+          typeof updater === 'function'
+            ? (updater as (p: boolean) => boolean)(prev)
+            : updater;
+        rest.onOpenChange?.(next);
+        return next;
+      });
+    },
+    [rest.onOpenChange],
+  );
 
   if (mode === 'read') {
     let dom = <>-</>;

src/field/components/TreeSelect/index.tsx

@@ -1,8 +1,9 @@
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import type { RadioGroupProps, TreeSelectProps } from 'antd';
 import { ConfigProvider, Spin, TreeSelect } from 'antd';
 import { clsx } from 'clsx';
 import React, {
+  useCallback,
   useContext,
   useImperativeHandle,
   useMemo,
@@ -63,12 +64,21 @@ const FieldTreeSelect: ProFieldFC<GroupProps> = (
     defaultKeyWords: propsSearchValue,
   });
 
-  const [searchValue, setSearchValue] = useMergedState<string | undefined>(
-    undefined,
-    {
-      onChange: onSearch as any,
-      value: propsSearchValue,
+  const [searchValue, setSearchValueInner] = useControlledState<
+    string | undefined
+  >(undefined, propsSearchValue);
+  const setSearchValue = useCallback(
+    (updater: string | undefined | ((prev: string | undefined) => string | undefined)) => {
+      setSearchValueInner((prev) => {
+        const next =
+          typeof updater === 'function'
+            ? (updater as (p: string | undefined) => string | undefined)(prev)
+            : updater;
+        (onSearch as (v?: string) => void)?.(next);
+        return next;
+      });
     },
+    [onSearch],
   );
 
   useImperativeHandle(ref, () => ({

src/form/BaseForm/BaseForm.tsx

@@ -4,7 +4,7 @@ import {
   set as namePathSet,
   omit,
   set,
-  useMergedState,
+  useControlledState,
   warning,
 } from '@rc-component/util';
 import { useUrlSearchParams } from '@umijs/use-params';
@@ -14,6 +14,7 @@ import type { NamePath } from 'antd/lib/form/interface';
 import { clsx } from 'clsx';
 import type dayjs from 'dayjs';
 import React, {
+  useCallback,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -670,10 +671,23 @@ export function BaseForm<T = Record<string, any>, U = Record<string, any>>(
     ...propRest
   } = props;
   const formRef = useRef<ProFormRef<any>>({} as any);
-  const [loading, setLoading] = useMergedState<boolean>(false, {
-    onChange: onLoadingChange,
-    value: propsLoading,
-  });
+  const [loading, setLoadingInner] = useControlledState<boolean>(
+    false,
+    propsLoading,
+  );
+  const setLoading = useCallback(
+    (updater: boolean | ((prev: boolean) => boolean)) => {
+      setLoadingInner((prev) => {
+        const next =
+          typeof updater === 'function'
+            ? (updater as (p: boolean) => boolean)(prev)
+            : updater;
+        onLoadingChange?.(next);
+        return next;
+      });
+    },
+    [onLoadingChange],
+  );
 
   const [urlSearch, setUrlSearch] = useUrlSearchParams(
     {},