ReactJS setTimeout not working

Question

Having this code in mind    var Component   React createClass        getInitialState  function              return  position  0                   componentDidMount  function              setTimeout this setState  position  1    3000               render  function               return                lt div className  component  gt                   this state position               lt  div gt                           ReactDOM render       lt Component   gt       document getElementById  main        Isn t the state supposed to change only after 3 seconds  It s changing immediately    My main goal here is to change the state every 3 seconds  with setInterval     but since it was not working  I tried setTimeout    which is not working either  Any lights on this  Thanks

User · Answer

I know this is a little old  but is important to notice that React recomends to clear the interval when the component unmounts  https   reactjs org docs state-and-lifecycle html  So I like to add this answer to this discussion     componentDidMount         this timerID   setInterval             gt  this tick          1000              componentWillUnmount         clearInterval this timerID

User · Answer

You did syntax declaration error  use proper setTimeout declaration   message      gt       setTimeout      gt   this setState  opened false    3000      return  Thanks for your time  have a nice day

User · Answer

Try to use ES6 syntax of set timeout  Normal javascript setTimeout   won t work in react js setTimeout             gt  this setState   position  100            5000

User · Answer

You didn t tell who called setTimeout  Here how you call timeout without calling additional functions   1  You can do this without making additional functions   setTimeout this setState bind this   position 1    3000     Uses function prototype bind    setTimeout takes the location of the function and keeps it in the context   2  Another way to do the same even by writing even less code   setTimeout this setState  3000   position 1      Probably uses the same bind method at some point  The setTimeout only takes the location of the function and the function already has the context  Anyway  it works   NOTE  These work with any function you use in js

User · Answer

Anytime we create a timeout we should s clear it on componentWillUnmount  if it hasn t fired yet         let myVar           const Component   React createClass                getInitialState  function                      return  position  0                                   componentDidMount  function                       myVar   setTimeout     gt  this setState  position  1    3000                              componentWillUnmount       gt                  clearTimeout myVar                               render  function                       return                        lt div className  component  gt                           this state position                       lt  div gt                                                   ReactDOM render       lt Component   gt       document getElementById  main

User · Answer

Do setTimeout      function             this setState   position  1                bind this       3000     Otherwise  you are passing the result of setState to setTimeout  You can also use ES6 arrow functions to avoid the use of this keyword  setTimeout         gt  this setState   position  1        3000

User · Answer

There s a 3 ways to access the scope inside of the  setTimeout  function  First   const self   this setTimeout function       self setState  position 1      3000    Second is to use ES6 arrow function  cause arrow function didn t have itself scope this   setTimeout     gt       this setState  position 1      3000    Third one is to bind the scope inside of the function  setTimeout function       this setState  position 1     bind this   3000

User · Answer

setTimeout      gt      this setState   position  1        3000     The above would also work because the ES6 arrow function does not change the context of this

User · Answer

Your code scope  this  will be your window object  not your react component  and that is why setTimeout this setState  position  1    3000  will crash this way   That comes from javascript not React  it is js closure    So  in order to bind your current react component scope  do this   setTimeout function   this setState  position  1    bind this   3000     Or if your browser supports es6 or your projs has support to compile es6 to es5  try arrow function as well  as arrow func is to fix  this  issue   setTimeout     gt this setState  position  1    3000

User · Answer

setState is being invoked immediately due to the parenthesis  Wrap it in an anonymous function  then call it   setTimeout function         this setState  position  1     bind this   3000

[javascript] ReactJS: setTimeout() not working?

Examples related to javascript

Examples related to reactjs