nikitaeverywhere / react-xmasonry

Simple, minimalistic and featured native masonry layout for React JS.
https://zitros.github.io/react-xmasonry
MIT License
91 stars 12 forks source link

Having a bit of an issue #17

Closed jimmycarlinco closed 4 years ago

jimmycarlinco commented 4 years ago

I am using this library to display a grid of data elements. Everything works perfectly when the grid is displayed statically. However my application is real time and new data elements are pushed from socket periodically. In addition there is infinite scroll so when user scrolls down 20 new data elements are loaded.

Now the xmasonry grid will glitch when the following sequence of actions happens: user scrollls down and triggers loading 20 new elements > before the load finishes 1 new real time item is added > load of 20 new elements finishes. This will cause the grid to render multiple children with the same key.

Seems like if the grid is still readjusting itself after the props change, it will somehow break.

This is driving me insane and maybe you can point me in the right direction? What do you think is the reason for the issue? A thousand thanks if you can help me.

nikitaeverywhere commented 4 years ago

Hello!

Thank you for reaching out.

From what I've tested, if you add elements sequentially (and even if randomly) it should never be an issue as far as you specify key="whatever" attribute for XBlock. Are you sure it is not your code which assigns duplicated keys to XBlocks? If not, I would love to see the codepen which reproduces the issue so I can clearly see what's wrong. There's definitely a lot of magic happening for assigned keys.

jimmycarlinco commented 4 years ago

You are right, your library is flawless! :D It was my own faulty reducer. Closing

nikitaeverywhere commented 4 years ago

Thanks! :) Good luck!