Can I execute a function after setState is finished updating

Question

I am very new to ReactJS  as in  just started today    I don t quite understand how setState works   I am combining React and Easel JS to draw a grid based on user input   Here is my JS bin  http   jsbin com zatula edit js output Here is the code      var stage          var Grid   React createClass           getInitialState  function                 return                   rows  10                  cols  10                                  componentDidMount  function                  this drawGrid                       drawGrid  function                 stage   new createjs Stage  quot canvas quot                var rectangles                   var rectangle                Rows             for  var x   0  x  lt  this state rows  x                                     Columns                 for  var y   0  y  lt  this state cols  y                                          var color    quot Green quot                       rectangle   new createjs Shape                        rectangle graphics beginFill color                       rectangle graphics drawRect 0  0  32  44                       rectangle x   x   33                      rectangle y   y   45                       stage addChild rectangle                        var id   rectangle x    quot   quot    rectangle y                      rectangles id    rectangle                                              stage update                       updateNumRows  function event                this setState   rows  event target value                 this drawGrid                       updateNumCols  function event                this setState   cols  event target value                 this drawGrid                       render  function                 return                    lt div gt                       lt div className  quot canvas-wrapper quot  gt                           lt canvas id  quot canvas quot  width  quot 400 quot  height  quot 500 quot  gt  lt  canvas gt                           lt p gt Rows    this state rows   lt  p gt                           lt p gt Columns   this state cols   lt  p gt                       lt  div gt                       lt div className  quot array-form quot  gt                           lt form gt                               lt label gt Number of Rows lt  label gt                               lt select id  quot numRows quot  value  this state rows  onChange   this updateNumRows   gt                                   lt option value  quot 1 quot  gt 1 lt  option gt                                   lt option value  quot 2 quot  gt 2 lt  option gt                                   lt option value   quot 5 quot  gt 5 lt  option gt                                   lt option value  quot 10 quot  gt 10 lt  option gt                                   lt option value  quot 12 quot  gt 12 lt  option gt                                   lt option value  quot 15 quot  gt 15 lt  option gt                                   lt option value  quot 20 quot  gt 20 lt  option gt                               lt  select gt                               lt label gt Number of Columns lt  label gt                               lt select id  quot numCols quot  value  this state cols  onChange   this updateNumCols   gt                                   lt option value  quot 1 quot  gt 1 lt  option gt                                   lt option value  quot 2 quot  gt 2 lt  option gt                                   lt option value  quot 5 quot  gt 5 lt  option gt                                   lt option value  quot 10 quot  gt 10 lt  option gt                                   lt option value  quot 12 quot  gt 12 lt  option gt                                   lt option value  quot 15 quot  gt 15 lt  option gt                                   lt option value  quot 20 quot  gt 20 lt  option gt                               lt  select gt                           lt  form gt                       lt  div gt                       lt  div gt                                       ReactDOM render           lt Grid   gt           document getElementById  quot container quot           You can see in the JSbin when you change the number of rows or columns with one of the dropdowns  nothing will happen the first time   The next time you change a dropdown value  the grid will draw to the previous state s row and column values   I am guessing this is happening because my this drawGrid   function is executing before setState is complete   Maybe there is another reason  Thanks for your time and help

User · Answer

when new props or states being received (like you call setState here), React will invoked some functions, which are called componentWillUpdate and componentDidUpdate

in your case, just simply add a componentDidUpdate function to call this.drawGrid()

here is working code in JS Bin

as I mentioned, in the code, componentDidUpdate will be invoked after this.setState(...)

then componentDidUpdate inside is going to call this.drawGrid()

read more about component Lifecycle in React https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate

User · Answer

render will be called every time you setState to re-render the component if there are changes  If you move your call to drawGrid there rather than calling it in your update  methods  you shouldn t have a problem   If that doesn t work for you  there is also an overload of setState that takes a callback as a second parameter  You should be able to take advantage of that as a last resort

User · Answer

With hooks in React 16 8 onward  it s easy to do this with useEffect I ve created a CodeSandbox to demonstrate this  useEffect      gt         code to be run when state variables in      dependency array changes     stateVariables  thatShould  triggerChange    Basically  useEffect synchronises with state changes and this can be used to render the  canvas import React    useState  useEffect  useRef   from  quot react quot   import   Stage  Shape   from  quot  createjs easeljs quot   import  quot   styles css quot    export default function App       const  rows  setRows    useState 10     const  columns  setColumns    useState 10     let stage   useRef      useEffect      gt        stage current   new Stage  quot canvas quot        var rectangles           var rectangle        Rows     for  var x   0  x  lt  rows  x               Columns       for  var y   0  y  lt  columns  y              var color    quot Green quot           rectangle   new Shape            rectangle graphics beginFill color           rectangle graphics drawRect 0  0  32  44           rectangle x   y   33          rectangle y   x   45           stage current addChild rectangle            var id   rectangle x    quot   quot    rectangle y          rectangles id    rectangle                    stage current update          rows  columns       return        lt div gt         lt div className  quot canvas-wrapper quot  gt           lt canvas id  quot canvas quot  width  quot 400 quot  height  quot 300 quot  gt  lt  canvas gt           lt p gt Rows   rows  lt  p gt           lt p gt Columns   columns  lt  p gt         lt  div gt         lt div className  quot array-form quot  gt           lt form gt             lt label gt Number of Rows lt  label gt             lt select             id  quot numRows quot              value  rows              onChange   e    gt  setRows e target value              gt               getOptions               lt  select gt             lt label gt Number of Columns lt  label gt             lt select             id  quot numCols quot              value  columns              onChange   e    gt  setColumns e target value              gt               getOptions               lt  select gt           lt  form gt         lt  div gt       lt  div gt          const getOptions        gt      const options    1  2  5  10  12  15  20     return        lt  gt         options map  option    gt             lt option key  option  value  option  gt             option           lt  option gt                 lt   gt

User · Answer

Making setState return a Promise  In addition to passing a callback to setState   method  you can wrap it around an async function and use the then   method -- which in some cases might produce a cleaner code    async      gt  new Promise resolve   gt  this setState  dummy  true    resolve         then      gt    console log  state    this state        And here you can take this one more step ahead and make a reusable setState function that in my opinion is better than the above version   const promiseState   async state   gt      new Promise resolve   gt  this setState state  resolve     promiseState             then      gt  promiseState             then      gt                    other code         return promiseState                     then      gt            This works fine in React 16 4  but I haven t tested it in earlier versions of React yet   Also worth mentioning that keeping your callback code in componentDidUpdate method is a better practice in most -- probably all  cases

User · Answer

setState updater   callback   is an async function  https   facebook github io react docs react-component html setstate You can execute a function after setState is finishing using the second param callback like  this setState       someState  obj         gt        this afterSetStateFinished         The same can be done with hooks in React functional component  https   github com the-road-to-learn-react use-state-with-callback usage Look at useStateWithCallbackLazy  import   useStateWithCallbackLazy   from  use-state-with-callback    const  count  setCount    useStateWithCallbackLazy 0    setCount count   1       gt       afterSetCountFinished

[javascript] Can I execute a function after setState is finished updating?

Examples related to javascript

Examples related to reactjs

Examples related to setstate