Uncaught Invariant Violation due to dom mutations done by plugin

Question

I came across an issue using javascript plugin named flickity, it enables touch friendly slideshow images.

I initialize it like this:

import Flickity from 'flickity';

---

componentWillUnmount() {
    this.flkty.destroy()
  }

  componentDidMount() {
    this.flkty = new Flickity(this.refs.carousel, {
      cellAlign: 'left',
    })
  }

It all works fine, but the issue is that div that it is targeting <div ref="carousel"></div>inside my render, is mutated to become flickity element. This sometimes results in Uncaught Invariant Violation error, when I re render components, hence I wanted to ask if there is a sollution to overcome this?

---

this is how I render related component

  render() {
    return (
        <div ref="carousel" className="carousel">
          { this.props.src.map((image, index, array) => {
            if(image.link != null) {
              return (
                <div key={index} className="card" style={ {backgroundImage: `url(${image.link})`} }>
                  <img
                    src={image.link} />
                </div>
              );
            }
          }) }
        </div>
    );
  }

Answer 1

Was able to fix my issue by adding:

  componentWillUpdate() {
    this.flkty.destroy()
  }

  componentDidUpdate() {
    this.flkty = new Flickity(this.refs.carousel, {
      cellAlign: 'left',
    })
  }