You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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:
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:
Result (React 18, Strict Mode, development mode):

x^2 appears but vanishes momentarily.
The text was updated successfully, but these errors were encountered: