[core] Switch back to useCallback to avoid ESLint error

[albarv340]

Revert back to previous implementation from #39078, with some minor adjustments. The reason for this is that eslint-plugin-react-compiler gives an ESLint error when ref.current is being accessed inside the useRef which from our understanding can cause inconsistencies. If this inconsistency is already handled in other ways, then the leaner version from #39078 can be kept, and an explicit ignore of this error could be added. This warning was noticed when working on #44591, and we felt it might be relevant to get rid of this ESLint warning as well.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against ac44245

[romgrk]

which from our understanding can cause inconsistencies

Can you clarify this? I don't understand.

[albarv340]

Can you clarify this? I don't understand.

We based this pull request mostly off of the ESLint warning given by eslint-plugin-react-compiler. From our understanding, it tries to catch the pitfall mentioned on this page: https://react.dev/reference/react/useRef. So the inconsistencies we were alluding to were the breaking of React's expectation that the body of a component behaves like a pure function. But we are not entirely sure this expectation is broken, we base it entirely on the ESLint warning, but that might be a false positive. Perhaps you know more on this topic?

[romgrk]

React's expectation that the body of a component behaves like a pure function

Kinda misleading terminology. Hooks are fundamentally impure functions, because they depend on hidden global state that isn't passed through parameters. So I'm guessing they're meaning "pure with the exception of React hooks".

But either way, I still don't understand how accessing ref.current is a potential issue. If you want to make the change, could you clarify what the potential issue is? I'd rather not blindly trust the eslint plugins, they're full of false positives. It could be worth it to open an issue upstream to ask them to clarify the eslint rule and/or the docs.