Performance issues when running in development mode

Describe the Bug

When running my application locally, I experience severe lags when dragging nodes. When opening this issue, I deployed the app on Netlify and noticed that the performance problems are vanished. I have attached videos that show this issue. The deployed version is available at https://react-flow--arguemapper.netlify.app.

Your Example Website or App

https://github.com/recap-utr/arguemapper/tree/react-flow

Steps to Reproduce the Bug or Issue

1. Run the app locally.
2. Click on Load Demo on the right sidebar.
3. Move the nodes around on the canvas.

Expected behavior

The expected behavior can be seen on the deployed version.

Screenshots or Videos

https://user-images.githubusercontent.com/5160954/178964220-46fca166-2d9e-4bcb-9c0a-a646d9d4cd93.mp4

https://user-images.githubusercontent.com/5160954/178964304-45c1613c-1c1c-41ea-a7b3-5962b2f331b5.mp4

Platform

• OS: macOS
• Browser: Safari (also happens with the newest version of Chrome, but to a much lesser extent)
• Version: 15.5

Additional context

No response

[mirkolenz]

Ah, ok. Thank you for the clarification. I will try to get rid of my “local” states with these tips 😄

[moklick]

We are using Zustand with a Provider (because there might be multiple RFs on a page or a user want to put the ReactFlowProvider somewhere higher in the tree) but if you are using Zustand the normal way you can just do:

const useStore = create(() => ({ nodes:[] }));

// somewhere in an event handler or useEffect
useStore.getState().nodes;

https://github.com/pmndrs/zustand#readingwriting-state-and-reacting-to-changes-outside-of-components