React js wait for setState to finish before triggering a function

Question

Here s my situation    on this handleFormSubmit   I am executing this setState   inside this handleFormSubmit    I am calling this findRoutes    - which depends on the successful completion of this setState   this setState    does not complete before this findRoutes is called    How do I wait for this setState   inside of this handleFormSubmit   to finish before calling this findRoutes      A subpar solution    putting this findRoutes   in componentDidUpdate   this is not acceptable because there will be more state changes unrelated the findRoutes   function  I don t want to trigger the findRoutes   function when unrelated state is updated    Please see code snippet below   handleFormSubmit  function input                      Form Input                 this setState                       originId  input originId                      destinationId  input destinationId                      radius  input radius                      search  input search                                    this findRoutes                               handleMapRender  function map                      Intialized Google Map                 directionsDisplay   new google maps DirectionsRenderer                    directionsService   new google maps DirectionsService                    this setState  map  map                    placesService   new google maps places PlacesService map                   directionsDisplay setMap map                              findRoutes  function                    var me   this                  if   this state originId     this state destinationId                        alert  findRoutes                         return                                    var p1   new Promise function resolve  reject                        directionsService route                           origin    placeId   me state originId                           destination    placeId   me state destinationId                           travelMode  me state travelMode                        function response  status                           if  status     google maps DirectionsStatus OK                                   me response   response                              directionsDisplay setDirections response                               resolve response                             else                               window alert  Directions config failed due to     status                                                                                         return p1                            render  function                     return                        lt div className  MapControl  gt                           lt h1 gt Search lt  h1 gt                           lt MapForm                             onFormSubmit  this handleFormSubmit                              map  this state map   gt                           lt GMap                             setMapState  this handleMapRender                              originId   this state originId                              destinationId   this state destinationId                              radius   this state radius                              search   this state search   gt                       lt  div gt

User · Answer

setState takes new state and optional callback function which is called after the state has been updated  this setState     newState   whatever           gt     do something after the state has been updated

User · Answer

setState   has an optional callback parameter that you can use for this  You only need to change your code slightly  to this      Form Input this setState          originId  input originId      destinationId  input destinationId      radius  input radius      search  input search        this findRoutes            here is where you put the callback      Notice the call to findRoutes is now inside the setState   call  as the second parameter  Without    because you are passing the function

User · Answer

According to the docs of setState   the new state might not get reflected in the callback function findRoutes    Here is the extract from React docs   setState   does not immediately mutate this state but creates a pending state transition  Accessing this state after calling this method can potentially return the existing value  There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains   So here is what I propose you should do  You should pass the new states input in the callback function findRoutes    handleFormSubmit  function input          Form Input     this setState           originId  input originId          destinationId  input destinationId          radius  input radius          search  input search             this findRoutes input         Pass the input here    The findRoutes   function should be defined like this  findRoutes  function me   this state          This will accept the input if passed otherwise use this state     if   me originId     me destinationId            alert  quot findRoutes  quot            return            var p1   new Promise function resolve  reject            directionsService route               origin    placeId   me originId               destination    placeId   me destinationId               travelMode  me travelMode            function response  status               if  status     google maps DirectionsStatus OK                       me response   response                  directionsDisplay setDirections response                   resolve response                 else                   window alert  Directions config failed due to     status                                         return p1

User · Answer

Why not one more answer   setState   and the setState  -triggered render   have both completed executing when you call componentDidMount    the first time render   is executed  and or componentDidUpdate    any time after render   is executed     Links are to ReactJS org docs   Example with componentDidUpdate   Caller  set reference and set state     lt Cmp ref   inst    gt   this parent inst   gt   this parent setState   data   hello       Render parent    componentDidMount                  componentDidMount   gets called after first state set     console log this state data        output   quot hello  quot    componentDidUpdate                 componentDidUpdate   gets called after all other states set     console log this state data        output   quot hello  quot     Example with componentDidMount   Caller  set reference and set state     lt Cmp ref   inst    gt   this parent inst   gt  this parent setState   data   hello       Render parent    render                     render   gets called anytime setState   is called     return            lt ChildComponent             state  this state            gt            After parent rerenders child  see state in componentDidUpdate    componentDidMount                  componentDidMount   gets called anytime setState   render   finish console log this props state data      output   quot hello  quot

User · Answer

this setState                        originId  input originId              destinationId  input destinationId              radius  input radius              search  input search                    function     console log  setState completed   this state               this might be helpful

[javascript] React.js, wait for setState to finish before triggering a function?

Examples related to javascript

Examples related to reactjs

Examples related to state