refactor: Replace useMountMergeState with useMergedState by zzjiaxiang · Pull Request #9383 · ant-design/pro-components

zzjiaxiang · 2026-01-08T16:48:23Z

about
同时删除了项目里面的 useMountMergeState 改为统一从 @rc-component/util 导入

Summary by CodeRabbit

重构

优化了内部状态管理机制，提升代码可维护性和一致性
清理了模块导入和导出结构，删除不再使用的内部工具
调整代码格式，无功能性变化

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…nents This commit updates various components to replace the deprecated useMountMergeState hook with the new useMergedState hook from @rc-component/util. The changes enhance consistency and maintainability in state management across the codebase. Additionally, some imports have been cleaned up to remove unnecessary references to the removed useMountMergeState utility.

coderabbitai · 2026-01-08T16:48:38Z

📝 Walkthrough

Walkthrough

该PR将自定义的useMountMergeState钩子迁移至来自@rc-component/util的标准钩子（useMergedState、useControlledState和useState），涵盖卡片、表单、布局和表格组件，同时清理导入重复和更新API导出。

Changes

Cohort / File(s)	变更摘要
卡片组件 CheckCard `src/card/components/CheckCard/Group.tsx`, `src/card/components/CheckCard/index.tsx`	将`useMountMergeState`替换为`useMergedState`进行状态初始化，保持行为不变
字段选择组件 `src/field/components/Select/index.tsx`, `src/field/components/Select/SearchSelect/index.tsx`	使用`useControlledState`管理选项状态，调整初始化逻辑；接口声明格式调整
表单基础组件 `src/form/BaseForm/BaseForm.tsx`, `src/form/BaseForm/LightWrapper/index.tsx`	加载状态从`useMountMergeState`切换至`useMergedState`或`useState`
表单项组件 `src/form/components/FormItem/FormItemRender/index.tsx`, `src/form/components/FormItem/Group/index.tsx`, `src/form/components/Text/index.tsx`	折叠/值状态从`useMountMergeState`替换为`useMergedState`；类型参数格式化调整
表单查询过滤 `src/form/layouts/QueryFilter/index.tsx`	宽度状态从`useMountMergeState`改用`useState`；添加并整合`RcResizeObserver`导入
布局组件 `src/layout/ProLayout.tsx`, `src/layout/components/GlobalHeader/ActionsContent.tsx`, `src/layout/components/PageHeader/index.tsx`, `src/layout/components/SiderMenu/BaseMenu.tsx`	菜单加载和键值状态改用`useMergedState`或`useState`；消除`ResizeObserver`导入重复
表格核心 `src/table/Table.tsx`, `src/table/useFetchData.tsx`	选中行键、表单搜索、过滤排序状态改用`useControlledState`或`useState`；数据列表和分页状态用`useMergedState`
表格辅助组件 `src/table/TableRender.tsx`, `src/table/TableSearch.tsx`, `src/table/TableToolbar.tsx`, `src/table/components/ListToolBar/index.tsx`	导入整理、格式调整；添加类型导入；消除`ResizeObserver`导入重复
工具函数 `src/utils/index.tsx`, `src/utils/useMountMergeState/index.ts`, `src/utils/useEditableArray/index.tsx`	删除`useMountMergeState`导出和公共别名；编辑数组操作改用`useState`
测试配置 `vitest.config.mts`	从覆盖率排除列表移除`useMountMergeState`相关路径

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~35 minutes

Poem

🐰 钩子的迁移之路，
从自制到标准库，
useMergedState 换新颜，
useControlledState 来相助，
useState 的简洁之美，
代码焕新，逻辑依旧。

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 12.50% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题准确概括了本次拉取请求的主要变更，即用 useMergedState 替换 useMountMergeState。

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist · 2026-01-08T16:48:59Z

Summary of Changes

Hello @zzjiaxiang, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求通过标准化状态管理钩子对代码库进行了重构。它将项目中原有的自定义 useMountMergeState 钩子替换为来自 @rc-component/util 库中更健壮且外部维护的 useMergedState 或 useControlledState。这一改变通过集中化工具钩子并移除其本地重复实现，简化了卡片、表单、布局和表格等各种组件中的状态管理逻辑。

Highlights

统一状态管理钩子: 将项目中自定义的 useMountMergeState 钩子替换为来自 @rc-component/util 包的 useMergedState 或 useControlledState。
移除本地实现: 删除了项目内部的 src/utils/useMountMergeState 文件及其所有引用，实现了状态管理逻辑的集中化。
优化代码结构: 通过统一使用外部库提供的钩子，减少了项目内部的重复实现，提高了代码的一致性和可维护性。
广泛应用: 此替换操作涉及 CheckCard、Select、BaseForm、QueryFilter、ProLayout、SiderMenu 和 ProTable 等多个核心组件。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

这是一个很棒的重构 PR，将项目内的 useMountMergeState 替换为从 @rc-component/util 导入的钩子函数。这提高了代码的一致性和可维护性。

我注意到代码中同时使用了 useMergedState 和 useControlledState。根据上游库 rc-component/util 的更新，useControlledState 是 useMergedState 新的推荐名称。为了保持一致性，我建议在整个项目中统一使用 useControlledState。我在几个文件中留下了修改建议。

gemini-code-assist · 2026-01-08T16:52:41Z

src/card/components/CheckCard/Group.tsx

  ]);

-  const [stateValue, setStateValue] = useMountMergeState<
+  const [stateValue, setStateValue] = useMergedState<


为了与上游库 @rc-component/util 的最新推荐保持一致，建议将 useMergedState 替换为 useControlledState。useControlledState 是 useMergedState 新的别名，使用新名称可以提高代码的可读性和未来维护性。同时请记得更新文件顶部的 import 语句：import { omit, useControlledState } from '@rc-component/util';

Suggested change

const [stateValue, setStateValue] = useMergedState<

const [stateValue, setStateValue] = useControlledState<

gemini-code-assist · 2026-01-08T16:52:41Z

src/card/components/CheckCard/index.tsx

  Group: typeof CheckCardGroup;
 } = (props) => {
-  const [stateChecked, setStateChecked] = useMountMergeState<boolean>(
+  const [stateChecked, setStateChecked] = useMergedState<boolean>(


为了与上游库 @rc-component/util 的最新推荐保持一致，建议将 useMergedState 替换为 useControlledState。同时请记得更新文件顶部的 import 语句：import { useControlledState } from '@rc-component/util';

Suggested change

const [stateChecked, setStateChecked] = useMergedState<boolean>(

const [stateChecked, setStateChecked] = useControlledState<boolean>(

gemini-code-assist · 2026-01-08T16:52:41Z

src/form/BaseForm/BaseForm.tsx

  } = props;
  const formRef = useRef<ProFormRef<any>>({} as any);
-  const [loading, setLoading] = useMountMergeState<boolean>(false, {
+  const [loading, setLoading] = useMergedState<boolean>(false, {


为了与上游库 @rc-component/util 的最新推荐保持一致，建议将 useMergedState 替换为 useControlledState。同时请记得更新文件顶部的 import 语句。

Suggested change

const [loading, setLoading] = useMergedState<boolean>(false, {

const [loading, setLoading] = useControlledState<boolean>(false, {

gemini-code-assist · 2026-01-08T16:52:41Z

src/form/components/FormItem/Group/index.tsx

    };

-    const [collapsed, setCollapsed] = useMountMergeState(
+    const [collapsed, setCollapsed] = useMergedState(


为了与上游库 @rc-component/util 的最新推荐保持一致，建议将 useMergedState 替换为 useControlledState。同时请记得更新文件顶部的 import 语句：import { useControlledState } from '@rc-component/util';

Suggested change

const [collapsed, setCollapsed] = useMergedState(

const [collapsed, setCollapsed] = useControlledState(

gemini-code-assist · 2026-01-08T16:52:41Z

src/form/components/Text/index.tsx

  }
 > = (props) => {
-  const [open, setOpen] = useMountMergeState<boolean>(props.open || false, {
+  const [open, setOpen] = useMergedState<boolean>(props.open || false, {


为了与上游库 @rc-component/util 的最新推荐保持一致，建议将 useMergedState 替换为 useControlledState。同时请记得更新文件顶部的 import 语句：import { omit, useControlledState } from '@rc-component/util';

Suggested change

const [open, setOpen] = useMergedState<boolean>(props.open || false, {

const [open, setOpen] = useControlledState<boolean>(props.open || false, {

gemini-code-assist · 2026-01-08T16:52:41Z

src/layout/ProLayout.tsx

  const prefixCls = props.prefixCls ?? context.getPrefixCls('pro');

-  const [menuLoading, setMenuLoading] = useMountMergeState(false, {
+  const [menuLoading, setMenuLoading] = useMergedState(false, {


为了与上游库 @rc-component/util 的最新推荐保持一致，建议将 useMergedState 替换为 useControlledState。同时请记得更新文件顶部的 import 语句。

Suggested change

const [menuLoading, setMenuLoading] = useMergedState(false, {

const [menuLoading, setMenuLoading] = useControlledState(false, {

gemini-code-assist · 2026-01-08T16:52:41Z

src/layout/components/SiderMenu/BaseMenu.tsx

-  const [openKeys, setOpenKeys] = useMountMergeState<
-    (string | number)[] | false
-  >(
+  const [openKeys, setOpenKeys] = useMergedState<(string | number)[] | false>(


为了与上游库 @rc-component/util 的最新推荐保持一致，建议将 useMergedState 替换为 useControlledState。useControlledState 是 useMergedState 新的别名，使用新名称可以提高代码的可读性和未来维护性。此文件中的其他 useMergedState（L593）也建议一并修改。同时请记得更新文件顶部的 import 语句：import { useControlledState } from '@rc-component/util';

Suggested change

const [openKeys, setOpenKeys] = useMergedState<(string | number)[] | false>(

const [openKeys, setOpenKeys] = useControlledState<(string | number)[] | false>(

gemini-code-assist · 2026-01-08T16:52:41Z

src/table/useFetchData.tsx

   * 用于存储最新的数据，这样可以在切换的时候保持数据的一致性
   */
-  const [tableDataList, setTableDataList] = useMountMergeState<
+  const [tableDataList, setTableDataList] = useMergedState<


为了与上游库 @rc-component/util 的最新推荐保持一致，建议将 useMergedState 替换为 useControlledState。useControlledState 是 useMergedState 新的别名，使用新名称可以提高代码的可读性和未来维护性。此文件中的其他 useMergedState（L94, L110）也建议一并修改。同时请记得更新文件顶部的 import 语句：import { useControlledState } from '@rc-component/util';

Suggested change

const [tableDataList, setTableDataList] = useMergedState<

const [tableDataList, setTableDataList] = useControlledState<

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/table/useFetchData.tsx (1)
103-115: 注释内容与代码职责混淆。

Line 103 的注释将 PageInfo 类型定义与 useMergedState 钩子实现细节混在一起，降低了代码可读性。建议将注释聚焦于 PageInfo 类型本身，避免提及具体的钩子实现：
♻️ 建议优化注释内容
  /**
-  * 表示页面信息的类型  useMergedState 钩子的初始值和参数
+  * 表示页面信息的类型
   * @typedef {object} PageInfo
   * @property {number} current 当前页码
   * @property {number} pageSize 页面大小
   * @property {number} total 数据总量
-  * @type {[PageInfo, React.Dispatch<React.SetStateAction<PageInfo>>]}
   */

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e6113b0 and 3ad2ce9.

📒 Files selected for processing (24)

src/card/components/CheckCard/Group.tsx
src/card/components/CheckCard/index.tsx
src/field/components/Select/SearchSelect/index.tsx
src/field/components/Select/index.tsx
src/form/BaseForm/BaseForm.tsx
src/form/BaseForm/LightWrapper/index.tsx
src/form/components/FormItem/FormItemRender/index.tsx
src/form/components/FormItem/Group/index.tsx
src/form/components/Text/index.tsx
src/form/layouts/QueryFilter/index.tsx
src/layout/ProLayout.tsx
src/layout/components/GlobalHeader/ActionsContent.tsx
src/layout/components/PageHeader/index.tsx
src/layout/components/SiderMenu/BaseMenu.tsx
src/table/Table.tsx
src/table/TableRender.tsx
src/table/TableSearch.tsx
src/table/TableToolbar.tsx
src/table/components/ListToolBar/index.tsx
src/table/useFetchData.tsx
src/utils/index.tsx
src/utils/useEditableArray/index.tsx
src/utils/useMountMergeState/index.ts
vitest.config.mts

💤 Files with no reviewable changes (3)

src/utils/index.tsx
src/utils/useMountMergeState/index.ts
vitest.config.mts

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/react.mdc)

**/*.{tsx,jsx}: Use early returns whenever possible to make the code more readable.
Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
Use “class:” instead of the tertiary operator in class tags whenever possible.
Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.

Files:

src/form/BaseForm/LightWrapper/index.tsx
src/layout/components/GlobalHeader/ActionsContent.tsx
src/table/TableRender.tsx
src/form/components/Text/index.tsx
src/utils/useEditableArray/index.tsx
src/form/layouts/QueryFilter/index.tsx
src/field/components/Select/index.tsx
src/card/components/CheckCard/Group.tsx
src/layout/ProLayout.tsx
src/field/components/Select/SearchSelect/index.tsx
src/table/useFetchData.tsx
src/layout/components/PageHeader/index.tsx
src/card/components/CheckCard/index.tsx
src/table/Table.tsx
src/form/BaseForm/BaseForm.tsx
src/form/components/FormItem/Group/index.tsx
src/table/components/ListToolBar/index.tsx
src/table/TableToolbar.tsx
src/layout/components/SiderMenu/BaseMenu.tsx
src/form/components/FormItem/FormItemRender/index.tsx
src/table/TableSearch.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/AGENTS.md)

**/*.{ts,tsx}: Use TypeScript and React for development
Use early returns to improve code readability
Use camelCase for property names
Props naming: Use default + PropName for initialization properties
Props naming: Use forceRender for forced rendering
Props naming: Use force + SubComponentName + Render for sub-component forced rendering
Props naming: Use SubComponentName + Render for sub-component rendering
Props naming: Use dataSource for data sources
Props naming: Use open instead of visible for panel opening state
Props naming: Use show + PropName for display-related properties
Props naming: Use PropName + able for functional properties
Props naming: Use disabled for disabled state
Props naming: Use extra for additional content
Props naming: Use icon for icons
Props naming: Use trigger for triggers
Props naming: Use className for class names
Event naming: Use on + EventName for triggering events
Event naming: Use on + SubComponentName + EventName for sub-component events
Event naming: Use before + EventName for pre-action events
Event naming: Use after + EventName for post-action events
Event naming: Use on + EventName + Complete for continuous action completion
All components and functions must provide accurate type definitions
Avoid using any type, define types as precisely as possible
Use interface rather than type alias for defining object structures
Strictly follow TypeScript type design principles to ensure type safety
Ensure compilation without any type errors or warnings
Component props should be defined using interface for extensibility
Component props interface naming should follow ComponentNameProps convention
Define specialized interfaces for component state, such as ComponentNameState
Complex data structures should be split into multiple interface definitions
All callback function types should explicitly define parameters and return values
Appropriately use generics to enhance t...

Files:

src/form/BaseForm/LightWrapper/index.tsx
src/layout/components/GlobalHeader/ActionsContent.tsx
src/table/TableRender.tsx
src/form/components/Text/index.tsx
src/utils/useEditableArray/index.tsx
src/form/layouts/QueryFilter/index.tsx
src/field/components/Select/index.tsx
src/card/components/CheckCard/Group.tsx
src/layout/ProLayout.tsx
src/field/components/Select/SearchSelect/index.tsx
src/table/useFetchData.tsx
src/layout/components/PageHeader/index.tsx
src/card/components/CheckCard/index.tsx
src/table/Table.tsx
src/form/BaseForm/BaseForm.tsx
src/form/components/FormItem/Group/index.tsx
src/table/components/ListToolBar/index.tsx
src/table/TableToolbar.tsx
src/layout/components/SiderMenu/BaseMenu.tsx
src/form/components/FormItem/FormItemRender/index.tsx
src/table/TableSearch.tsx

**/*index.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/AGENTS.md)

Export all public interface types for user convenience

Files:

src/form/BaseForm/LightWrapper/index.tsx
src/form/components/Text/index.tsx
src/utils/useEditableArray/index.tsx
src/form/layouts/QueryFilter/index.tsx
src/field/components/Select/index.tsx
src/field/components/Select/SearchSelect/index.tsx
src/layout/components/PageHeader/index.tsx
src/card/components/CheckCard/index.tsx
src/form/components/FormItem/Group/index.tsx
src/table/components/ListToolBar/index.tsx
src/form/components/FormItem/FormItemRender/index.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/AGENTS.md)

All components must support dark mode

Files:

src/form/BaseForm/LightWrapper/index.tsx
src/layout/components/GlobalHeader/ActionsContent.tsx
src/table/TableRender.tsx
src/form/components/Text/index.tsx
src/utils/useEditableArray/index.tsx
src/form/layouts/QueryFilter/index.tsx
src/field/components/Select/index.tsx
src/card/components/CheckCard/Group.tsx
src/layout/ProLayout.tsx
src/field/components/Select/SearchSelect/index.tsx
src/table/useFetchData.tsx
src/layout/components/PageHeader/index.tsx
src/card/components/CheckCard/index.tsx
src/table/Table.tsx
src/form/BaseForm/BaseForm.tsx
src/form/components/FormItem/Group/index.tsx
src/table/components/ListToolBar/index.tsx
src/table/TableToolbar.tsx
src/layout/components/SiderMenu/BaseMenu.tsx
src/form/components/FormItem/FormItemRender/index.tsx
src/table/TableSearch.tsx

🧠 Learnings (25)

📓 Common learnings

Learnt from: CR
Repo: ant-design/pro-components PR: 0
File: .cursor/rules/AGENTS.md:0-0
Timestamp: 2025-12-26T06:32:24.230Z
Learning: Applies to **/*.{tsx} : Use functional components and hooks, avoid class components

Learnt from: CR
Repo: ant-design/pro-components PR: 0
File: .cursor/rules/AGENTS.md:0-0
Timestamp: 2025-12-26T06:32:24.230Z
Learning: Applies to **/demo/**/*.tsx : Use functional components and hooks in demos

Learnt from: CR
Repo: ant-design/pro-components PR: 0
File: .cursor/rules/AGENTS.md:0-0
Timestamp: 2025-12-26T06:32:24.230Z
Learning: Applies to **/*.{tsx} : Use `useLocale` hook from `components/locale/index.tsx` to get localization configuration from global context

Learnt from: CR
Repo: ant-design/pro-components PR: 0
File: .cursor/rules/AGENTS.md:0-0
Timestamp: 2025-12-26T06:32:24.230Z
Learning: Support React 16 ~ 19 compatibility