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

useMergedRef does not supports React 19's cleanup functions for refs #7269

Open
2 tasks done
elecdeer opened this issue Dec 16, 2024 · 4 comments · May be fixed by #7304
Open
2 tasks done

useMergedRef does not supports React 19's cleanup functions for refs #7269

elecdeer opened this issue Dec 16, 2024 · 4 comments · May be fixed by #7304
Labels
help wanted Contributions from community are welcome

Comments

@elecdeer
Copy link
Contributor

Dependencies check up

  • I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.15.1

What package has an issue?

@mantine/hooks

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Not applicable – issue is not related to the browser

Describe the bug

React 19 supports cleanup functions for ref callbacks.
https://react.dev/blog/2024/12/05/react-19#cleanup-functions-for-refs

In React 18, ref functions were called with null when unmounting a component.
However, In React 19, a cleanup function is called at unmount time if ref returns a cleanup function, similar to how useEffect cleanup works.

The useMergedRef utility in Mantine currently does not handle these cleanup functions properly.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

  • I would be willing to implement a fix for this issue
@rtivital
Copy link
Member

You are welcome to submit a PR with a fix

@rtivital
Copy link
Member

You are still welcome to submit a PR with a fix.

@rtivital rtivital added the help wanted Contributions from community are welcome label Dec 23, 2024
@muco-rolle
Copy link
Contributor

I'll submit a PR for this.

@elecdeer
Copy link
Contributor Author

Sorry, there were more considerations than I initially thought, and I haven't finished it yet.
We need to ensure it works with both React 18 and React 19, and that the behavior is not broken when merging CallbackRefs with cleanup function and those without.

I plan to submit the PR by the end of this week.

@elecdeer elecdeer linked a pull request Dec 24, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Contributions from community are welcome
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[@mantine/hooks] Support ref cleanup function in React 19 with useMergedRef elecdeer/mantine
3 participants
@rtivital @elecdeer @muco-rolle