Question

89

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

rated 0 times [ 91] [ 2] / answers: 1 / hits: 19540 / 7 Years ago, mon, september 11, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jennie

Add To Favorites

Follow

Total Points: 593

Total Questions: 102

Total Answers: 106

Location: Federated States of Micronesia

Member since Fri, Sep 16, 2022

2 Years ago

jennie questions

1 Is there a React equivalent of Vue's nextTick() function?

Tue, Jun 21, 22, 00:00, 2 Years ago

1 how to loop to expect a list of item in jest

Tue, Feb 8, 22, 00:00, 2 Years ago

1 arrow function expected no return value with clean-up function in useEffect

Sun, May 23, 21, 00:00, 3 Years ago

1 React Re-Render Causes Flickering : How can i fix this?

Thu, Mar 4, 21, 00:00, 3 Years ago

1 React onChange not working for input inside functional component

Thu, Feb 25, 21, 00:00, 3 Years ago

View All

answered 7 Years ago dezmondhumbertob · Accepted Answer

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.