xyflow/xyflow

`onViewportChange` Function Not Updated When Dependencies Change in useEffect Hook

alexanderhorner opened this issue · 1 comments

alexanderhorner commented

What platform were you using when you found the bug?

  • React Flow / Svelte Flow version: 12.1.1
  • Browser and version: n/a
  • OS and version: n/a

Live code example

https://codesandbox.io/p/sandbox/cocky-leftpad-w9z9nz

Describe the Bug

There is a bug in the useEffect hook within the zoomPane setup code where the onViewportChange function is used. The useEffect hook does not include onViewportChange in its dependency array. As a result, if the onViewportChange function is updated, the effect continues to reference the stale closure of the function, leading to unexpected behavior where the old version of the function is called instead of the new one.

Steps to reproduce the bug or issue

  1. Open sandbox and run preview
  2. Click "Use ViewportStore2" Button
  3. Try to move or zoom the pane

Expected behavior

The pane should move. But since the stale onViewportChange changes the ViewportStore1, all changes will be applied to that. When you switch back you will see exactly that.

Screenshots or Videos

No response

Additional context

No response

moklick commented

Thanks @alexanderhorner ! This is fixed in 12.2.1

  • 🎉1