Api call with timer not firing when props are updating faster than timer is set for

Question

I have 2 useEffects inside my component both with setTimeout and clearTimeout methods inside of them. They both update based on the same props and the conditions inside them are the same however one is set to fire every 3 seconds and the other should fire every 1 minute.

My issue is the one that should update every minute is not firing at all.

I think it may be reseting every time the props update (every 3 seconds when i console inside the if statement it is consoling) but im not sure how to work around this since the props will update every time the first one is fired.

My goal here is

1. To hit an endpoint every 3 seconds until I get an expected result and
2. Log this event every 1 minute so as not to overload the database sending the same information over and over.

these are my useEffects:

  useEffect(() => {
    if(!providerData?.providerAvailable ) {

      sendMessage({
        code: 'NO_PROVIDER_AVAILABLE',
        value: 'No provider currently available',
      });

      const timerId = window.setTimeout(() => providerRefetch(), 3000);

      return () => window.clearTimeout(timerId);
    } else {
      return;
    }
  }, [providerData]);


  // send No provider event every minute
  useEffect(() => {
    if ( !providerData?.providerAvailable ) {

      const eventId = window.setTimeout(() => sendEvent(), 60000, {
        key: 'NO_PROVIDER_AVAILABLE',
        description: 'No provider currently available',
      });

      return () => window.clearTimeout(eventId);

    } else {
      return;
    }
  }, [providerData]);

Answer 1

Instead of basing my second useEffect off of the same props as the first I created a count that increments up every time the first is called and the 2nd useEffect updates when the count updates:

const [callCount, setCallCount] = useState(0);

 useEffect(() => {
    if (
      providerError ||
      (!providerData?.providerAvailable && providerData?.providerState !== 'engaged')
    ) {
      if (callCount < 21) {
        let count = callCount + 1;
        setCallCount(count);
      } else {
        setCallCount(0);
      }

      sendMessage({
        type: 'EVENT',
        code: 'NO_PROVIDER_AVAILABLE',
        value: 'No provider currently available',
      });

      const timerId = window.setTimeout(() => providerRefetch(), 3000);

      return () => window.clearTimeout(timerId);
    } else {
      return;
    }
  }, [providerData, providerRefetch, providerError]);

  // send No provider event every minute
  useEffect(() => {
    if (callCount === 2) {
      
          sendEvent({
            key: 'NO_PROVIDER_AVAILABLE',
            description: 'No provider currently available',
          })

    } else {
      return;
    }
  }, [callCount]);