Skip to content
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

Jump to bottom

[utils] Allow passing NaN as defaultValue to useControlled #41559

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
+7 −1
Open

[utils] Allow passing NaN as defaultValue to useControlled #41559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a330197
[utils] Allow passing NaN as defaultValue to useControlled
iammminzzy Mar 19, 2024
ea98fb5
Merge branch 'next' into use-controlled
ZeeshanTamboli Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/mui-utils/src/useControlled/useControlled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function useControlled({ controlled, default: defaultProp, name,
const { current: defaultValue } = React.useRef(defaultProp);

React.useEffect(() => {
if (!isControlled && defaultValue !== defaultProp) {
if (!isControlled && !Object.is(defaultValue, defaultProp)) {
console.error(
[
`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +
Expand Down
6 changes: 6 additions & 0 deletions packages/mui-utils/src/useControlled/useControlled.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,10 @@ describe('useControlled', () => {
setProps({ defaultValue: 1 });
}).not.toErrorDev();
});

it('should not raise a warning if setting NaN as the defaultValue when uncontrolled', () => {
expect(() => {
render(<TestComponent defaultValue={NaN}>{() => null}</TestComponent>);
}).not.toErrorDev();
});
Comment on lines +109 to +113
Copy link
Member

Choose a reason for hiding this comment

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

Why should it support this? It looks like more bundle size and complexity for no clear value in exchange.

Object.is is not supported in IE11

We don't support IE 11 anymore, so maybe Object.is would make it, a light DX improvement for no real UX cost.

Copy link

Choose a reason for hiding this comment

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

One example is if you have a Select component where one of the options has value of NaN and you set the defaultValue to NaN you would incorrectly get the "component is changing the default value state" warning.

Copy link
Contributor

Choose a reason for hiding this comment

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

Bundle size shouldn’t be impacted at all because the whole effect is wrapped in a process.env.NODE_ENV check, and nowhere else in the codebase uses Object.is and there are IE11 comments, so we figured it’s better to keep the partial IE11 support but more than happy to use Object.is (that’s what React uses for dependency arrays, for example)

Copy link
Member

Choose a reason for hiding this comment

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

One example is if you have a Select component where one of the options has value of NaN

Isn't it wrong that an option has a value of NaN?

Copy link

Choose a reason for hiding this comment

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

One example is if you have a Select component where one of the options has value of NaN

Isn't it wrong that an option has a value of NaN?

Respectfully, I don't think there's anything wrong with using NaN as a value. For example I could use it to represent a "None" value, or maybe the number value comes from user input and NaN represents an invalid input.

});