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

[core][utils] Fix useTimeout clear lifecycle #44897

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Dec 29, 2024

As far as I know, using useOnMount() is wrong in this context. We need to clear the timeout synchronously with the component unmounts.

See facebook/react#19671, with https://codesandbox.io/p/sandbox/unruffled-banzai-7zzr6k?file=%2Fsrc%2FDemo.tsx that illustrates the difference in behavior:

SCR-20241229-tccr

It seems the root cause of why mui/mui-x#14987. This fix is upstream of: mui/mui-x#16031, but it might be best to first merge downstream, so we test it with a smaller userbase.

@oliviertassinari oliviertassinari added package: utils Specific to the @mui/utils package core Infrastructure work going on behind the scenes labels Dec 29, 2024
@mui-bot
Copy link

mui-bot commented Dec 29, 2024

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against f7a1e56

Comment on lines +38 to +39
// eslint-disable-next-line react-hooks/exhaustive-deps
useEnhancedEffect(timeout.disposeEffect, []);
Copy link
Contributor

Choose a reason for hiding this comment

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

I would use a stable deps like useOnMount does:

const EMPTY = [] as unknown[];
// ...
useEnhancedEffect(effect, EMPTY);

import useLazyRef from '../useLazyRef/useLazyRef';
import useOnMount from '../useOnMount/useOnMount';
import useLazyRef from '../useLazyRef';
import useEnhancedEffect from '../useEnhancedEffect';
Copy link
Contributor

Choose a reason for hiding this comment

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

It's not the first time I see useEnhancedEffect cause such issue, the hook makes it less apparent that useLayoutEffect is used, and that it runs on a different cycle than useEffect.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Infrastructure work going on behind the scenes on hold There is a blocker, we need to wait package: utils Specific to the @mui/utils package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants