Estaba trabajando en un componente de presentación de diapositivas y me gustaría actualizar su intervalo para la reproducción automática. Pero, el valor no se actualiza inmediatamente. Cada vez que hago clic para acelerar o reducir la velocidad, el estado usa el valor de la última vez, no el que se actualizó, incluso usé setState().

 var id; const data = [img1, img2, img3, img4]; class Slideshow extends React.Component { constructor(props) { super(props); this.state = { ImgId: 0, interval: 2000 }; } startSlideshow() { this.pause(); // prevent start multiple setInterval() id = setInterval(() => { this.setState(state => ({...state, ImgId: (state.ImgId + 1) % data.length})) }, this.state.interval); console.log(this.state.interval); } pause() { if (id) { clearInterval(id); } } slowDown() { this.setState((state) => ({...state, interval: state.interval + 250})); this.startSlideshow(); } speedUp() { this.setState((state) => ({...state, interval: state.interval === 250 ? 250 : state.interval - 250})); this.startSlideshow(); } render() { return ( <> <button onClick={() => this.startSlideshow()}>Start</button> <button onClick={() => this.pause()}>Pause</button> <button onClick={() => this.slowDown()}>Slow down</button> <button onClick={() => this.speedUp()}>Speed up</button> <img src={"images/"+data[this.state.ImgId].filename} className="w-100"/> <h6 className="text-center">{data[this.state.ImgId].filename}</h6> </> ); } }