Skip to content

refactor: Upgrade utils and replace useMergedState #1162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 9, 2025
Merged

refactor: Upgrade utils and replace useMergedState #1162

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3acb0fb
refactor: Upgrade utils and replace useMergedState
Sep 8, 2025
0796710
feat: set default value ""
Sep 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"dependencies": {
"@rc-component/trigger": "^3.0.0",
"@rc-component/motion": "^1.1.4",
"@rc-component/util": "^1.2.1",
"@rc-component/util": "^1.3.0",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This is good to upgrade to the latest version of @rc-component/util. However, ensure that all the changes in the new version are compatible with the current implementation and that all functionalities are working as expected.

"classnames": "2.x",
"rc-overflow": "^1.4.0",
"rc-virtual-list": "^3.5.2"
Expand Down
7 changes: 2 additions & 5 deletions src/BaseSelect/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
import cls from 'classnames';
import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Replacing useMergedState with useControlledState is the core of this refactor. Ensure that the behavior of useControlledState aligns with the previous behavior of useMergedState, especially regarding default values and controlled/uncontrolled component logic.

import isMobile from '@rc-component/util/lib/isMobile';
import { useComposeRef } from '@rc-component/util/lib/ref';
import { getDOM } from '@rc-component/util/lib/Dom/findDOMNode';
Expand Down Expand Up @@ -383,10 +383,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
setRendered(true);
}, []);

const [innerOpen, setInnerOpen] = useMergedState<boolean>(false, {
defaultValue: defaultOpen,
value: open,
});
const [innerOpen, setInnerOpen] = useControlledState<boolean>(defaultOpen || false, open);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The useControlledState hook is used here. It's important to verify that the initial state and the controlled value are correctly handled. Consider adding a comment explaining why defaultOpen || false is used as the initial state.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在原本 useMergedState 的使用中 defaultOpen 的使用优先于默认的 false


let mergedOpen = rendered ? innerOpen : false;

Expand Down
11 changes: 3 additions & 8 deletions src/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
* - `combobox` mode not support `optionLabelProp`
*/

import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
import warning from '@rc-component/util/lib/warning';
import * as React from 'react';
import type {
Expand Down Expand Up @@ -272,10 +272,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
);

// =========================== Search ===========================
const [mergedSearchValue, setSearchValue] = useMergedState('', {
value: searchValue,
postState: (search) => search || '',
});
const [mergedSearchValue, setSearchValue] = useControlledState('', searchValue);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Verify that the initial state and controlled value are correctly handled for mergedSearchValue. Ensure that the component behaves as expected when the searchValue prop changes.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里要额外写一下：

const [internalSearchValue, setSearchValue] = useControlledState('', searchValue);
const mergedSearchValue = internalSearchValue || '';


// =========================== Option ===========================
const parsedOptions = useOptions(
Expand Down Expand Up @@ -343,9 +340,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
);

// =========================== Values ===========================
const [internalValue, setInternalValue] = useMergedState(defaultValue, {
value,
});
const [internalValue, setInternalValue] = useControlledState(defaultValue, value);

// Merged value with LabelValueType
const rawLabeledValues = React.useMemo(() => {
Expand Down
Loading