Incorrect Children Position

[kienhg96]

React Masonry sometimes renders incorrect children position (overlap).

Image: https://ibb.co/mduYe8

After I wrap this.masonry.layout() by setTimeout inside performLayout method, it renders correctly.

performLayout: function() {
    var diff = this.diffDomChildren();
    var reloadItems = diff.forceItemReload || diff.moved.length > 0;

    // Would never be true. (see comments of 'diffDomChildren' about 'removed')
    if (diff.removed.length > 0) {
      if (this.props.enableResizableChildren) {
        diff.removed.forEach(this.erd.removeAllListeners, this.erd);
      }
      this.masonry.remove(diff.removed);
      reloadItems = true;
    }

    if (diff.appended.length > 0) {
      this.masonry.appended(diff.appended);

      if (diff.prepended.length === 0) {
        reloadItems = true;
      }

      if (this.props.enableResizableChildren) {
        diff.appended.forEach(this.listenToElementResize, this);
      }
    }

    if (diff.prepended.length > 0) {
      this.masonry.prepended(diff.prepended);

      if (this.props.enableResizableChildren) {
        diff.prepended.forEach(this.listenToElementResize, this);
      }
    }

    if (reloadItems) {
      this.masonry.reloadItems();
    }
// ===> HERE
    setTimeout(() => {
      this.masonry.layout();
    });
// ===
  },

[phthhieu]

Hi @eiriklv, this happens to my project too, but just unpredictably, do you have any suggestions to fix this?