React 19 Ref callback cleanup functions are not invoked on MUI components

[lpeabody]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/github-ezyfe25c?file=src%2FApp.tsx
2. Open console and see that the cleanup function for the button component is never invoked

Current behavior

A MUI component that is passed a ref callback function which returns a cleanup function does not have its cleanup function invoked when the component is unmounted. It instead passes null to callback function.

Expected behavior

Material components with ref callback functions that return a cleanup function should properly execute the cleanup function when the component is unmounted.

See https://react.dev/reference/react-dom/components/common#ref-callback.

Context

I have a list of search results, where each result item includes a checkbox. I have a context that tracks state of number selected, the selected values, and an array of all of the checkboxes that are mounted. The state is maintained with a reducer.

I want to use the ref cleanup function to remove this element from the tracked state data.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.9 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 20.16.0 - /usr/bin/node
    npm: 10.8.1 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome
  npmPackages:
    @emotion/react: ^11.13.5 => 11.14.0 
    @emotion/styled: ^11.13.5 => 11.14.0 
    @mui/core-downloads-tracker:  6.4.7 
    @mui/icons-material: ^6.1.9 => 6.4.1 
    @mui/material: ^6.4.7 => 6.4.7 
    @mui/private-theming:  6.4.6 
    @mui/styled-engine:  6.4.6 
    @mui/styles: ^6.1.8 => 6.4.1 
    @mui/system:  6.4.7 
    @mui/types:  7.2.21 
    @mui/utils:  6.4.6 
    @types/react: ^19.0 => 19.0.8 
    react: ^19.0 => 19.0.0 
    react-dom: ^19.0 => 19.0.0 
    typescript: ^5.6.3 => 5.7.3

Search keywords: ref callback cleanup react 19

[DiegoAndai]

Hey @lpeabody, thanks for the report! You're correct, this is not supported at the moment do to useForkRef's implementation: https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/useForkRef/useForkRef.ts

I'll work on a fix

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.