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):
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?