Change image each 3 seconds in react.js

Question

I have a problem that I can not resolve in react : I want to change a background image each all 3 seconds. The code work to do this but it involves just one problem : when I update the "teaserAnimCount" state, I can see in my console that this value increase exponentially. I don't know why, with time, it's a problem because the web brother crash.

In the begining, the value of "console.log("this.state.teaserAnimCount") is 1 (it good), then 3, then 7, then 15,... If your are any idea why ?

This is in the renderTeaserBackground arrow function.

My code :

import React, { Component } from 'react';
import teaserImg1 from '../img/teaser-img-1.png';
import teaserImg2 from '../img/teaser-img-2.png';
import teaserImg3 from '../img/teaser-img-3.png';
import teaserImg4 from '../img/teaser-img-4.png'; 
import ProjetTitle from './ProjetTitle';
import { HashLink as Link } from 'react-router-hash-link';
import { TweenMax, Linear } from 'gsap';
import '../plugins/DrawSVGPlugin';

const teaserBgImg = [teaserImg1, teaserImg2, teaserImg3, teaserImg4];

class Teaser extends Component {

  constructor(props) {
    super(props);
    this.state = {
      teaserAnimDuration: 3,
      teaserBg: teaserBgImg,
      teaserAnimCount: 0,
      teaserBgLength: teaserBgImg.length,
      teaserBackground: ''
    }
  }

  componentDidMount() {
    TweenMax.from(
      this.refs.circle,
      this.state.teaserAnimDuration,
      {
        drawSVG: "0%",
        ease: Linear.easeNone,
        repeat: -1
      }
    )
  }

  renderTeaserBackground = () => {
    setTimeout(function() {
      let teaserBackground = this.state.teaserBg[this.state.teaserAnimCount];
      this.setState({teaserAnimCount: this.state.teaserAnimCount + 1});
      this.setState({teaserBackground});
      console.log(this.state.teaserAnimCount);
    }.bind(this), this.state.teaserAnimDuration * 1000);
    return this.state.teaserBackground;
  }

  render() {
    this.renderTeaserBackground();
    let backgroundImg = {
        backgroundImage: 'url(' + this.state.teaserBackground + ')'
    }
    return (
      <Link to="/Content" className="teaser" style={backgroundImg}>
        <svg className="svg-teaser" xmlns="http://www.w3.org/2000/svg">
          <circle ref="circle" cx="50%" cy="50%" r="50%" fill="none"/>
        </svg>
        <div className="teaser-text-container flex">

        </div>
        <ProjetTitle className="teaser-info-teaser"/>
      </Link>
    );
  }
}

export default Teaser;

Thank you for your help.

jdmdevdotnet · Accepted Answer · 2018-03-09 22:53:32Z

3

It looks like it is calling this.renderTeaserBackground() from render, this function updates the state, and calls the render that calls the state update etc. It crashes because of maximum call stack excedded.

I would try to move the this.renderTeaserBackground(); call to componentWillMount() and just use the state variable inside the render function.

edited Mar 9, 2018 at 22:53

jdmdevdotnet

1

answered Mar 9, 2018 at 22:16

Lukasz

1,84010 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lukasz Over a year ago

Change setTimeout to setInterval if you want this to be called multiple times. Be careful though, you'd have to clear the timeout/interval on component unmount.

Tyler Sebastian · Accepted Answer · 2018-03-09 22:30:21Z

Couple things.

as already mentioned, don't call this.setState in render (calling another function which calls it counts). If you want something to be run just before render, use componentWillMount. If you want something to run just after render, use componentDidMount. The docs suggest using componentDidMount for operations that change state (although I don't think it's a hard rule).
when you're changing state to something that depends on the previous value, it's a good idea to use the callback form of this.setState. The argument is a callback which gives you the current state.
when working with timeouts, make sure you're only creating another timeout as part of the previous timeout. This will prevent multiple timeouts from being "active" simultaneously.
keep a reference to your timeout and, when the component unmounts, clear it.

Here's a working example that covers most of my points: https://jsfiddle.net/69z2wepo/130855/

Bmaed Riasbet · Accepted Answer · 2018-03-09 23:11:22Z

0

When the component first load it calls render function which calls renderTeaserBackground function.

renderTeaserBackground function modify the component's state which force the component to re-render again,it executes render and executes renderTeaserBackground function again. and so on ...

move this.renderTeaserBackground from render function to componentDidMount life cycle hook.

Add another call to renderTeaserBackground in setTimeout callback function or use setInterval.

remove this line return this.state.teaserBackground;. it's useless.

edited Mar 9, 2018 at 23:11

answered Mar 9, 2018 at 22:32

Bmaed Riasbet

15.1k9 gold badges42 silver badges57 bronze badges

4 Comments

Bmaed Riasbet Over a year ago

Let me know what you get as error when you move this.renderTeaserBackground to componentDidMount

Guillaume Over a year ago

The renderTeaserBackground function it's called just once.

jdmdevdotnet Over a year ago

Apparently the error is Hum, it no work again :/ see @Lukasz answer

jdmdevdotnet Over a year ago

Saying that does not help anyone help you.

Collectives™ on Stack Overflow

Change image each 3 seconds in react.js

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related