How to change a react state immediately by setTimeout after setState?

Question

new in react here, don't know if it's right to do this on the setState callback like this?

           setTimeout(()=> {
            this.setState((state, props) => ({ activateLightColorForRed: true }), () => {
              setTimeout(()=> {
                this.setState(()=> ({ activateLightColorForRed: false }))
              }, 500);
              red.play();
            })
          }, toWait);

or maybe something like this?

 this.setState((state, props) => {
    this.setState((state, props) => {
      activateLightColorForRed: true
    });
    setTimeout(() => { activateLightColorForRed: false },500)
  })

are the state on the setState callback updated? something weird is happening in my components, it's rendering multiple times. I am not sure but I think it's because I'm doing the first sample?

could you post the full code for the component? Are you calling setState from within the render method? — James Gentes
– James Gentes, Commented Sep 11, 2017 at 22:26
Heads-up @i-am-newbie : setState are asynchronous in nature and you could also use simply this.setState({activateLightColorForRed:true}) i.e. pass a object instead of passing in a function. Might help in readability. And yeah post the complete code for the component. It will help us. Thanks — KeshavDulal
– KeshavDulal, Commented Sep 12, 2017 at 3:23

S.Kiers · Accepted Answer · 2018-11-02 18:25:25Z

12

Your question does not seem to follow the pattern of a regular react app. You should be using the lifecycle events to react to the state being changed. You should not be making multiple, nested, confusing callbacks (like it seems you want to do).

Might I suggest a structure more like this

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activateLightColorForRed: false,
    };
  }
  componentDidUpdate(prevProps, prevState) {
    if (this.state.activateLightColorForRed) {
      // when the state is updated (turned red), 
      // a timeout is triggered to switch it back off
      this.turnOffRedTimeout = setTimeout(() => { 
        this.setState(() => ({activateLightColorForRed: false}))
      }, 500);
    }
  }
  componentWillUnmount() {
    // we set the timeout to this.turnOffRedTimeout so that we can
    // clean it up when the component is unmounted.
    // otherwise you could get your app trying to modify the state on an
    // unmounted component, which will throw an error
    clearTimeout(this.turnOffRedTimeout);
  }
  render () {
    // really simply ui to show how it *could* work
    return (
      <div onClick={this.turnLightRed}>
        The light is {this.state.activateLightColorForRed ? "Red" : "Green"}.
        <br /> Click to change!
      </div>
    )
  }
  turnLightRed = () => {
    // this function will turn the light red
    this.setState(() => ({ 
      activateLightColorForRed: true 
    }));
  }
}

ReactDOM.render(
  <Foo name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="container"></div>

Hope that helps.

edited Nov 2, 2018 at 18:25

answered Sep 12, 2017 at 4:06

S.Kiers

4,2363 gold badges35 silver badges38 bronze badges

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

6 Comments

gpbaculio Over a year ago

being new in react this is very helpful. most of the time i have to re read docs.

Yasin Yaqoobi Over a year ago

From React docs: "This method is not called for the initial render." This won't work.

S.Kiers Over a year ago

What are you talking about @YasinYaqoobi? Please be more specific to what you think won't work

Yasin Yaqoobi Over a year ago

componentDidUpdate is not called on initial render reactjs.org/docs/…, so the timeout never gets called. Even after clicking when the state is red, it doesn't automatically change to "green"

S.Kiers Over a year ago

componentDidUpdate is not supposed to fire onLoad. It fires after the state is updated; when the button is clicked. Then the timeout starts and reverts the state after 500ms. I am quite confident that this works.

|

Collectives™ on Stack Overflow

How to change a react state immediately by setTimeout after setState?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related