Browser crashs when re-rendering Masonry childrens

When updating the Masonry items (childrens), the browser crash.

You can view it live here

Reproduce: Switch between tabs (woman and man), or select/unselect one of the carousel items (the movies). The Masonry, for some reason breaks and the browser crashs.

This is the code that renders the Masonry:

import Masonry from 'react-masonry-component';

// ...

const posters = this.props.content.map((item, index) => {
      return (
        <OutfitPoster
          key={index}
          className={[styles.productItem, stylesMasonry.item].join(' ')}
          title={item.content_title}
          description={item.product.name}
          imageSrc={item.content.thumbnail}
          shopLink={item.product.link}
        />
      )
});

return (
   <Masonry className={[styles.products, stylesMasonry.masonry].join(' ')}
        updateOnEachImageLoad
      >
          {posters}
      </Masonry>
    );
)

This this.props.content changes each time I filter it by selecting a tab or movie.

Thanks!

[jerryslaw]

Hi. I have similar issue. onLayoutComplete is calling several times, I don’t know why. When I use @sandrina-p solution, it fires only once, but - I want to change my redux state when layout is completed, so I’m calling some function from props, and then… My call stack is exceeded, onLayoutComplete is in infinite call loop.

My code is:

import React from 'react';
import PropTypes from 'prop-types';
import Masonry from 'react-masonry-component';
import { connect } from 'react-redux';
import compose from 'lodash/fp/compose';

import FetchContainer from 'containers/Fetch';
import { galleryFetch, openGalleryPreview } from 'store/actions';

import './Gallery.scss';

const masonryOptions = {
  itemSelector: '.gallery__item',
  columnWidth: 300
};

class GalleryComponent extends React.Component {

  static propTypes = {
    data: PropTypes.arrayOf(PropTypes.object),
    openPreview: PropTypes.func,
    changeLayoutStatus: PropTypes.func
  };

  static defaultProps = {
    data: []
  };

  componentDidMount() {
    this.props.changeLayoutStatus(false);
  }

  layoutComplete = () => {
    this.props.changeLayoutStatus(true);
  };

  render() {
    const { data: images, openPreview, changeLayoutStatus } = this.props;

    return (
      <div className="gallery">
        <div className="gallery__images">
          <Masonry
            key={new Date().getTime()}
            className="gallery__masonry"
            options={masonryOptions}
            onLayoutComplete={this.layoutComplete}
          >
            {
              images.map((image, i) => (
                <div key={i} className="gallery__item">
                  <img src={image.url} alt={image.name} onClick={() => openPreview(images.indexOf(image))} />
                </div>
              ))
            }
          </Masonry>
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = {
  changeLayoutStatus: changeGalleryLayoutStatus,
  openPreview: openGalleryPreview
};

export default compose(
  FetchContainer(galleryFetch, 'gallery'),
  connect(null, mapDispatchToProps)
)(GalleryComponent);

Difference is that () => console.log('called') is calling only once (as expected), but my function is calling infinitely.

PS. My GalleryComponent is not re-rendering after each call of changeLayoutStatus

[afram]

@jerryslaw I know this is a very old ticket. Are you in a position to try the latest version and see how it works for you. Does it solve your problem?