Breaks using Strict Mode in React 18

[bensaine]

In React 18, this library does not work with Strict Mode in development mode.

React 18 introduces a change to Strict Mode which mounts and unmounts components.
See quoted section from React Docs:

With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component.

For some reason, this is breaking the library: Desmos expressions don't load properly. For example, if you put static <Expression> in <ScientificCalculator> (say "x=2"), the expression will load and quickly remove itself (probably because of the mount/unmount). However, dynamic <Expression>s containing some React state (that updates) work fine. The issue is solved when I remove Strict Mode, build for production, or downgrade to React 17. Thus it must be related to this new React 18 change.

I suspect it has to do with refs, and I found this issue. Many report similar symptoms: facebook/react#24670

Example:

<GraphingCalculator>
	<Expression id="function" latex="x^2" />
</GraphingCalculator>

Result (React 18, Strict Mode, development mode):

x^2 appears but vanishes momentarily.

[danielfostiak]

I have this issue aswell, lmk if you found a fix please. For now i have just turned off strict mode

[elitebyte]

Also have these issue. Did you guys come up with a solution?

[jdthorpe]

For what it's worth, this appears to be only a problem in the dev server and doesn't appear in production builds.

[ysulyma]

Current recommendation is to disable Strict Mode, or use it selectively in your app (not around a Desmos component). Will look into fixing this in the future, but it's tricky to do with the Desmos API