ysulyma/desmos-react

Breaks using Strict Mode in React 18

bensaine opened this issue · 2 comments

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):
Result
x^2 appears but vanishes momentarily.

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

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