React 18 and strict mode are not compatible with RMWC 8 and 14

[eleith]

version

8.0.1

issue

in react 16 / 17, RMWC "works" with react strict mode, but there are known warnings about a deprecated function

in react 18, these errors can no longer be ignored. many components now behave unexpectedly with strict mode on. as one example, ripple no longer works when rendered in strict mode:

https://codesandbox.io/s/rmwc-typescript-sandbox-forked-r4ef85?file=/src/index.tsx

other components have much more impactful breakdowns such as the textfield when used with a label

context

strict mode only runs in development mode and is meant to hightlight best practices

nextjs also recommends strict mode

workaround

the issue can be worked around simply by disabling strict mode.

this would be healthy to document in this project directly if that workaround is desired / expected.

possible workaround

it is possible that something similar to this existing PR would resolve the underlying issue. i have not tested this approach.

[adchag]

We're also getting this error using RMWC with ReactStrictMode enabled and react 18.
React’s Strict Mode double-renders feature seems to be causing problems with the RMWC select menu and navigation drawer. The state update from clicking on the menu might be getting “overwritten” by the second render.
We'd rather not use the workaround of disabling strict mode.

[kale1d0code]

I was trying to figure out why my snackbar wasn't showing (could see html being updated but css rules made the snackbar invisible)

removing StrictMode makes it work as expected.

I haven't noticed any other issues apart from this, if I noticed anything extra I can post here

[kale1d0code]

This is the same for the dialog components.
It takes a few HMR updates to make a dialog window open after changing the open prop value to true when using strict mode.

I also see an error message regarding using refs with certain components (I think this is a documented problem with how the ripple effect works). This shows up either when using strict mode or not

[EmiBemi]

@kale1d0code @eleith We are currently looking into making a prerelease from our next branch, which supports React 18. I would love to know if this issue persist after the prerelease!

[kale1d0code]

I had a go with the Button and DIalog components from 14.0.2-alpha.7

and got the following error:

Module not found: Error: Can't resolve '@rmwc/touch-target' in '/workspaces/.../node_modules/.pnpm/@rmwc+button@14.0.2-alpha           

I do have other components installed from RMWC (v8) which could have caused this issue as some sort of mismatch.

I'll try switching them all out at once later,

[jensborch]

@kale1d0code This is stille an issue in version 14. Right now we few other issues we need to address, but we will make an effort to address this particular issue as soon as possible. We do not plane to fix this in version 8 only in version 14. PRs are as always welcome :-)

[coultonluke]

This is a problem for me and I'm not using React in strict mode as far as I can tell (I don't have React.StrictMode around the root of my react component).

I just forked a react template with typescript and was struggling to get going with RMWC, just adding a button to the homepage.

I have a button but I had to install @rmwc/touch-target in order to get @rmwc/button. Is that just because it's missing it as a dependency?

Forked repo/: https://github.com/coultonluke/react-typescript-webpack-rmwc-template.git

[b-d-m-p]

This is just a note as to some of the issues, for later reference...

In strict mode, certain things don't work: stuff related to state, like the drawer open close. What seems to happen is things render two times, so some actions fire twice. MDC uses classes for state and it seems like when the thing renders a second time, the animations get in the way. We are not sure if that is the exact issue, and we are not sure how to fix it at the moment.