onLayoutChange is always called twice about react-grid-layout

[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