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.

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

[Slider] Don't error on minimal changes with readonly value #28472

Merged
merged 7 commits into from
Sep 27, 2021

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Sep 19, 2021

Closes #28466

We previously leveraged React bailing out when setting state that's referntially equal. But at the same time we tried to mutate that value (essentially breaking the assumptions that React has about referentially equal values). This causes errors in JavaScript's Strict Mode ("use strict"; not React.StrictMode) if that value is frozen (which RTK does).

I removed the shortcut since it probably has next to no benefit since we always fired a change behavior regardless. If we want to revisit the performance shortcut, we need to be diligent and measure. Because I doubt there's much benefit when the Slider would re-render anyway if the value is controlled.

Simulating user input that may lead to a change but doesn't because it's too small
@eps1lon eps1lon added bug 🐛 Something doesn't work component: slider This is the name of the generic UI component, not the React module! labels Sep 19, 2021
@mui-pr-bot
Copy link

mui-pr-bot commented Sep 19, 2021

Details of bundle changes

@material-ui/core: parsed: +Infinity% , gzip: +Infinity%
@material-ui/lab: parsed: +Infinity% , gzip: +Infinity%
@material-ui/styles: parsed: +Infinity% , gzip: +Infinity%
@material-ui/private-theming: parsed: +Infinity% , gzip: +Infinity%
@material-ui/system: parsed: +Infinity% , gzip: +Infinity%
@material-ui/unstyled: parsed: +Infinity% , gzip: +Infinity%
@material-ui/utils: parsed: +Infinity% , gzip: +Infinity%

Generated by 🚫 dangerJS against d6c981d

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

I removed the shortcut since it probably has next to no benefit since we always fired a change behavior regardless. If we want to revisit the performance shortcut, we need to be diligent and measure. Because I doubt there's much benefit when the Slider would re-render anyway if the value is controlled.

I think that we should revert. This logic allows shortcutting the rendering. When you slide, you often call 10 times the same onChange with the same value. This is noticeable, especially when controlled. DX is also benefiting from this logic, when using a console log, you won't get flooded.

[
['readonly range', Object.freeze([1, 2])],
['range', [1, 2]],
].forEach(([valueLabel, value]) => {
Copy link
Member

Choose a reason for hiding this comment

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

Should we write the tests on the "styled" version? To be more "end-to-end"?

Copy link
Member Author

Choose a reason for hiding this comment

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

The unstyled version is already the end.

@eps1lon
Copy link
Member Author

eps1lon commented Sep 20, 2021

I think that independently of the UX impact, it's better from the DX to have fewer renders.

Does not matter. It's such a negligible impact that no additional line of code is worth it.

@eps1lon
Copy link
Member Author

eps1lon commented Sep 20, 2021

Revert the recent attempt by @oliviertassinari to make it work. The change should be done with more diligence. Either onChange fires with a changed value or it doesn't fire at all. This mixed behavior is just confusing.

@oliviertassinari
Copy link
Member

Either onChange fires with a changed value or it doesn't fire at all. This mixed behavior is just confusing.

Agree, we could push it one step further, it would be more intuitive for developers.
I'm going to try to build a reproduction to demonstrate the performance value of this optimization for end-users.

@eps1lon
Copy link
Member Author

eps1lon commented Sep 27, 2021

I'm going to try to build a reproduction to demonstrate the performance value of this optimization for end-users.

That's not the issue here. The issue is that we have behavior that doesn't match the interface semantics. We fire a change event even though nothing changed. That is a bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: slider This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Slider Component issue with redux RTK throws error when the store is updated
3 participants