Updating state onChanged causes tons of logs about react-owl-carousel

[joshuadiezmo]

I create separate component and add shouldComponentUpdate

class ImagePreview extends Component {
	shouldComponentUpdate(nextProps, nextState) {
		return false;
	}

	render() {
		return (
			<div>
				<OwlCarousel
					className="owl-theme"
					loop margin={10} nav autoplay items={1}
				>
					<div class="item"><h4>1</h4></div>
					<div class="item"><h4>2</h4></div>
					<div class="item"><h4>3</h4></div>
					<div class="item"><h4>4</h4></div>
					<div class="item"><h4>5</h4></div>
					<div class="item"><h4>6</h4></div>
					<div class="item"><h4>7</h4></div>
					<div class="item"><h4>8</h4></div>
					<div class="item"><h4>9</h4></div>
					<div class="item"><h4>10</h4></div>
					<div class="item"><h4>11</h4></div>
					<div class="item"><h4>12</h4></div>
				</OwlCarousel>
			</div>
		);
	}
}

[adriancmiranda]

I made something very similar to @joshuadiezmo

import React from 'react';
import ReactOwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

export default class OwlCarousel extends React.Component {
	shouldComponentUpdate() {
		return false;
	}

	render() {
		const { children, ...props } = this.props;
		return (
			<ReactOwlCarousel {...props}>
				{children}
			</ReactOwlCarousel>
		);
	}
}

that works like a charm

[KiselevAlexander]

@Monichre when you set new state OWL re-render with default props.
This is my solution.

<OwlCarousel
    items={1}
    startPosition={currentSlideIndex}
    onTranslated={(e) => {
        this.setState({
            currentSlideIndex: e.item.index
        });
    }}
>
    {SLIDES.map((slide, key) => (
        <div key={key}>
            <img src={slide.src} alt="" />
        </div>
    ))}
</OwlCarousel>

[mrjosshi]

How to get current slide index and set to state variable?

[Monichre]

Did you guys ever solve this? I had the same issue. I switched to onDragged and onTranslated but now my carousel re-renders after every drag event. Thoughts?