Skip to content

Bug: AsyncQueuer addItem() bypasses wait period when called during active processing #188

@caluhm

Description

@caluhm

TanStack Pacer version

v0.20.1

Framework/Library version

React v19

Describe the bug and the steps to reproduce it

When using AsyncQueuer (or useAsyncQueuer) with a wait option, calling addItem() during the wait period between item processing bypasses the configured delay and triggers immediate processing.

Expected behavior: Items added during the wait period should respect the wait timing and be processed after the current wait completes.

Actual behavior: Items added during the wait period are processed immediately without waiting.

Steps to reproduce

Using the official useAsyncQueuer example:

  1. Set wait: 4000 on the queuer options
  2. Add a few items and start the queue
  3. While the queue is processing (during the 4s wait period between items), add more items via addItem()
  4. Observe that newly added items are processed immediately, skipping the 4s wait entirely

Root Cause

In the #tick() method of AsyncQueuer, pendingTick is set to false synchronously at the end of the method, even when async work (execution + wait timer) has been scheduled via an async IIFE:

  #tick = () => {
    this.#setState({ pendingTick: true });

    // ...

    while (...) {
      (async () => {
        await this.execute();
        const wait = this.#getWait();
        if (wait > 0) {
          setTimeout(() => this.#tick(), wait);
          return;
        }
        this.#tick();
      })();
    }

    this.#setState({ pendingTick: false }); // ← runs immediately, before async work completes
  }

Since pendingTick is false during the entire wait period, addItem() sees isRunning && !pendingTick as true and triggers an immediate #tick() that bypasses the wait.

Suggested fix

Track whether async work was scheduled and only clear pendingTick when no async work is pending:

  let scheduledAsyncWork = false;

  while (...) {
    scheduledAsyncWork = true;
    (async () => {
      await this.execute();
      // ...
    })();
  }

  if (!scheduledAsyncWork) {
    this.#setState({ pendingTick: false });
  }

I'm happy to open a PR with this fix and a test case.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/github/tanstack/pacer/tree/main/examples/react/useAsyncQueuer?embed=1&theme=dark&preset=node&file=src/index.tsx

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Yes, I am also opening a PR that solves the problem along side this issue

Terms & Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions