Issues with React 18 StrictMode

[erikhofer]

React 18 brings some infamous changes to the way StrictMode works during development (see https://coderpad.io/blog/development/why-react-18-broke-your-app/).

This also seems to cause some issues with this library. I encountered the first error in a piece of code that uses useEffect to re-run the layout whenever the elements change. I have created an SSCCE here:

https://codesandbox.io/s/cytoscape-react18-strict-mode-ysrugk

This code worked with React 17. Now, you have to remove the <StrictMode> in index.js to make it work again. This is only an issue during development. If you build a production version of the app, it works normally.

I also encountered the following error after swallowing this one with a try-catch.

Uncaught TypeError: Cannot read properties of undefined (reading 'h')
    at GridLayout.run (cytoscape.cjs.js:18308:1)
    at setElesAndLayout (cytoscape.cjs.js:16254:1)
    at cytoscape.cjs.js:16264:1
    at loadExtData (cytoscape.cjs.js:16219:1)
    at new Core (cytoscape.cjs.js:16256:1)
    at new cytoscape (cytoscape.cjs.js:27669:1)
    at w.componentDidMount (react-cytoscape.modern.js:180:1)
    at invokeLayoutEffectMountInDEV (react-dom.development.js:21710:1)
    at invokeEffectsInDev (react-dom.development.js:23628:1)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:23609:1)

In my app, this is only triggered when opening the graph in a modal. I was not able to reproduce this in an SSCCE but maybe the stack trace helps.

[banuni]

This is a major blocker for my team as well

[erikhofer]

https://github.com/plotly/react-cytoscapejs/blob/3808c36148f6e79ad2be8cd76f20db9dfaa11a57/src/component.js#L61

This looks like it could be the problem.

[banuni]

yes, I'm also facing a similar issue with getting the cy element back from CytoscapeComponent

[banuni]

my workaround is currently putting all of my useEffect(() => doStuffWithCy(cy)) code into a setTimeout with 1 ms...and it seem to work)