[ButtonBase] Start ripple pulsation only after mount

[m4theushw]

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

Before: https://codesandbox.io/s/checkboxes-material-demo-forked-xrw1ff?file=/demo.tsx

After: https://codesandbox.io/s/checkboxes-material-demo-forked-vg2d2u?file=/demo.tsx

In React 18, any component derived from ButtonBase that receives focus during mount will crash when rippleRef.current.pulsate() is called. This happens because the TouchRipple is rendered conditionally to save resources on SSR. However, in React 18, the effect that sets the focus runs slightly faster than the effect responsible for updating the state to render the ripple. More information see facebook/react#24102 (comment)

I noticed this bug when testing the compatibility of the DataGrid with React 18. In our case, we use Checkbox and when a cell switches from view to edit mode we need to focus the input component. To reproduce the crash in the DataGrid follow the steps below:

1. Open https://deploy-preview-4155--material-ui-x.netlify.app/components/data-grid/demo/
2. Scroll to the right to see the "Is filled" column
3. Click once in one of the cells of the "Is filled" column
4. Press Enter
5. 💥

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 603aa8b

[siriwatknp]

👍 Looks good. Is it possible to test at this point?

[MichaelDeBoey]

@mnajdova Sorry to ping you when this PR is already closed for more than a year.

Just out of curiosity: I was wondering if there is a specific reason why you went with the useEffect + useState instead of checking if rippleRef.current has a value (like we already do a couple of lines lower: https://github.com/mui/material-ui/pull/31950/files#diff-dedcd6c4fe29d61278a0e914afce0473b71a38e6621469a736af9436989f6a1aR156)? 🤔