Clock app with axios and react-moment

Community feedback

• 

  P

  markus•2,250

  @markuslewinPosted over 1 year ago

  I agree about the clean up function. What's happening is that a new timer starts every time the data fetching finishes, but the timers from earlier fetches are never stopped. If the refresh button is pressed 3 times, there'll be 3 timers counting down towards the next minute.

  clearTimeout can be used to stop the timers. The function takes an ID of the timer to stop. The ID can be stored in a variable in each effect:

  useEffect(() => {
    let timeoutId;
    Promise.all([getTime(), getPlace(), getQuote()])
      .then((results) => {
        // state stuff
  
        timeoutId = setTimeout(() => {
          setRefresh(!refresh);
        }, timeout);
      })
      .catch((err) => err);
    return () => {
      clearTimeout(timeoutId);
    };
  }, [refresh]);
  

  There's usually another problem related to data fetching like this. When multiple fetches are in-flight, there's risk for a race condition if one of the earlier requests resolves after the latest request resolves. I couldn't reproduce that in this project, though. I think it's because refresh sort of works like a lock that ensures only one fetch is in-flight at any given time. Maybe that's by design?!

  I'll post a link to the data fetch example in the docs, just in case. That whole page is great:

  https://react.dev/learn/you-might-not-need-an-effect#fetching-data

  Marked as helpful

  1

  ---

  

  kasey•320

  @kaseyveePosted over 1 year ago

  @markuslewin Super helpful resource- thanks for sharing!

  1