Lets say i have this :

  useEffect(() => {
    asyncCalc(wp);
  }, [value1, value2])

  const asyncCalc = (wp) => {
    if (!start || !end) return
    const service = new google.maps.DirectionsService();
    service.route(
      {
        origin: start.coordinates,
        destination: end.coordinates,
        travelMode: google.maps.TravelMode.DRIVING,
        waypoints: wp,
        optimizeWaypoints: true
      },
      (result, status) => {
        if (status === "OK" && result) {
          console.log(result)
          setDirections(result);
          waypoint_order.current = result.routes[0].waypoint_order;
          const optimizedRoute = waypoint_order.current.map(index => businessesSelected[index])
          dispatch(setWaypoints(optimizedRoute))
        }
      }
    );
  }

If value1 changes, asyncCalc would execute. But what if value2 changes BEFORE the first call is completed? What happens to that function call.

I kinda tested it with some console.log statements in my asyncCalc and it seems to just stop its execution midway. I just want to know if thats true or expected behavior. thanks

CodePudding user response：

But what if value2 changes BEFORE the first call is completed?

Unless the function has specifically coded something that allows for its interruption mid-process - such as AbortController for fetch - and your code hooks into that functionality that allows for interruption - then the existing running function will continue on running to the end, without being interrupted.

But, keep in mind:

• useEffect callbacks run only after a re-render completes

• If expensiveCalc is, as it sounds, expensive (rather than asynchronous), then if something else tries to call the state setter and cause a re-render, that will only be possible once the expensive function has finished and yielded control back to the rest of the app. JavaScript is single-threaded, so generally speaking, if you have expensiveCalc(value1, value2); somewhere in the code, once it starts, that function will go on to the end before any other code can possibly run.

  The code that calls the state setter that could cause the re-render won't even be able to run before the expensive function finishes. Even if it does (say, the expensive function itself calls it), React won't be able to re-render until the current effect hook callback has finished, which requires the expensive function to have completed first.