onLayoutChange is always called twice

[akteigland]

Describe the bug

After updating to v1.4.1, onLayoutChange is always called twice.

My same code works on v1.4.0, but on v1.4.1 my function onLayoutChange is always called twice, first with the correct changes and then again with a revert. This happens both on dragging and resizing.

You can see this happens in the default code sandbox if you change the version to 1.4.1

Your Example Website or App

https://codesandbox.io/s/frosty-stallman-8763h3?file=/src/index.js

Steps to Reproduce the Bug or Issue

Add "onLayoutChange" prop
Change the layout
See the function is called twice

Expected behavior

As a user, I expect onLayoutChange to only be called once per change

react-grid-layout library version

1.4.1

Operating System Version

Linux

Browser

Firefox

Additional context

No response

Screenshots or Videos

No response

[Jonathan-Hofmann]

I have the same error in my project.

EDITED:
I have found a workaround for my case.

I previously have used the onLayoutChange callback for saving the grid layout. But as onLayoutChange is now called multiple times (in my case 3 times!! per move) it resets the previously made changes back to the original.
(So basically saves 3 times. 1st = new changes; 2nd & 3rd = previous layout -> Overwrites old 'saved' changes).
As a result one could not even move a widget anymore as the layout was being reset all the time.

The workaround I found is to use the onDragStop callback to save the newest layout/widget position. This works great and is only being called ONCE and not twice/three times when a widget is moved.

In addition as I needed to save the new position (of the widget) in the currently visible breakpoint I also needed to add the onBreakointChange callback to always receive the current visible breakpoint to save in.

One note for the onBreakointChange callback: This callback seems to NOT be called initially when first rendered so I had to create a useEffect Hook to calculate the initial breakpoint on initial render.

I hope this helps a bit / with this you can work on fixing your code :)

[davidliudev]

@Jonathan-Hofmann Thanks man for saving my day. Having the exact same issue and the layout got overwritten and it is a mess. Your workaround works great!

The onLayoutChange callback definitely need some re-work to avoid duplicated calling..

[rever96]

yeah, your tips helped me too.

// onLayoutChange={handleLayoutChange} // called too many times
onDragStop={handleLayoutChange}
onResizeStop={handleLayoutChange}

but I still have problems on y position when having elements of different height in grid