React-grid-layout: onLayoutChange triggers on every click

[Widly]

Hi!

I've stuck with problem, that onLayoutChange callback triggers too often, literally on every layout element click. Here is an example. In my project i use redux to store and update grid layout, therefore it leads to unnecessary grid redraws.

I also noticed, that if layout elements placed on same row (e.g. y props are 0), then the problem doesn't appear.

Thanks!

[Szarko]

@Widly - I found managing layouts in Redux store created significant delays when dragging and dropping as opposed to handling in React state, regardless, a suggestion I can give you is in your onLayoutChange handler to simply do a sanity check to compare your current layouts with the updated 'layouts', if there is no difference don't dispatch your Redux action to update.

[komorebi-san]

@Szarko How did you do the sanity check? SImple array comparison using loops?

[jojonarte]

@Szarko I wonder if simple array comparison is the best way to sanity check, can you suggest a more efficient approach.

[CWSites]

@komorebi-san & @jojonarte I do something similar throughout my app and the most complete way that I've found is to pass it as an object and use .stringify() for the comparison.

https://www.w3schools.com/js/js_json_stringify.asp

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days