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

[perf] Prevent unneeded clearTimeout calls #39060

Merged
merged 19 commits into from
Jan 25, 2024
Merged

Conversation

romgrk
Copy link
Contributor

@romgrk romgrk commented Sep 19, 2023

Follow-up of #37512 (comment)
Notion task page

Prevent unneeded usages of clearTimeout by introducing a useTimeout hook and a Timeout class that encapsulate the logic required to avoid those calls, as well as handle effect cleanup automatically.

The hooks introduced here are already used in the datagrid, once this is merged I'll clean them up from there to use these.

@romgrk romgrk added performance package: utils Specific to the @mui/utils package labels Sep 19, 2023
Comment on lines +28 to +30
export { default as unstable_useLazyRef } from './useLazyRef';
export { default as unstable_useTimeout, Timeout as unstable_Timeout } from './useTimeout';
export { default as unstable_useOnMount } from './useOnMount';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I would have released these without the unstable_ prefix but I see that all your hooks use this format so I've kept them consistent with that.

Copy link
Member

Choose a reason for hiding this comment

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

@mnajdova should we plan to move away from this naming strategy? I don't know why/when we started with it

Copy link
Member

Choose a reason for hiding this comment

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

We had this whole conversation about how we want to treat this package. We used unstable_ to allow ourselves to do breaking changes whenever we need. There were discussions that we may want to keep this package in alpha all the time, this would mean that Base UI, Material UI and other packages will re-export the things that makes sense, or make sure the APIs are consistent. @ would tag @michaldudak as a owner of the @mui/utils package to share his opinion.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Is this package used externally? It doesn't seem to be publicized, doesn't have a readme on npm and doesn't seem to have docs. If it's not used externally, there shouldn't be any downsides to publishing a new major version each time we need to make changes. I must say it's a bit annoying to have to destructure the unstable_ prefix each time it's used in the datagrid.

For the hooks that I've introduced here, I also don't see any potential breaking change in the future. Their behavior is pretty clear and fundamental, e.g. I don't see how useLazyRef could be expanded in a breaking way.

Copy link
Member

@DiegoAndai DiegoAndai Jan 19, 2024

Choose a reason for hiding this comment

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

I added it for discussion on Monday's Core weekly. Let us know if you wish to attend to discuss this so we can send an invite @romgrk 😊

@mui-bot
Copy link

mui-bot commented Sep 19, 2023

Netlify deploy preview

https://deploy-preview-39060--material-ui.netlify.app/

@material-ui/core: parsed: -0.08% 😍, gzip: +0.03%
@material-ui/lab: parsed: -0.10% 😍, gzip: +0.14%
@material-ui/unstyled: parsed: +0.23% , gzip: +0.27%
@material-ui/utils: parsed: +5.54% , gzip: +4.11%
@mui/material-next: parsed: +0.04% , gzip: +0.11%
@mui/joy: parsed: -0.00% 😍, gzip: +0.12%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 08a50c9

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 17, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 17, 2024
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

The useTimeout hook is a great improvement over using timeouts directly 👏🏼

I left a question for you and one "off topic" for @mnajdova

Comment on lines +28 to +30
export { default as unstable_useLazyRef } from './useLazyRef';
export { default as unstable_useTimeout, Timeout as unstable_Timeout } from './useTimeout';
export { default as unstable_useOnMount } from './useOnMount';
Copy link
Member

Choose a reason for hiding this comment

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

@mnajdova should we plan to move away from this naming strategy? I don't know why/when we started with it

packages/mui-material/src/Tooltip/Tooltip.js Show resolved Hide resolved
Comment on lines +248 to +251
const closeTimer = useTimeout();
const enterTimer = useTimeout();
const leaveTimer = useTimeout();
const touchTimer = useTimeout();
Copy link
Member

Choose a reason for hiding this comment

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

So much cleaner ✨

Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

Looks good to me 🚀 Nice improvement

@brijeshb42 @michaldudak any comments before merging?

@romgrk romgrk merged commit d62c991 into mui:master Jan 25, 2024
19 checks passed
@romgrk romgrk deleted the perf-use-timeout branch January 25, 2024 12:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: utils Specific to the @mui/utils package performance
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants