Can setTimeout and setInterval react violations which are caused by TanStack Query be ignored?

[ChristopherHaws]

I have been receiving many react violation warnings in local dev. To figure out where they were coming from I hooked into window.setTimeout to log a stack trace when the callback takes longer than 50ms and it seems like the culprit is TanStack Query. Is it safe to ignore these warnings?

[Violation] 'setTimeout' handler took 130ms
index.ts:55 setTimeout callback took 131.00ms
    wrappedCallback                     @ index.ts:55
    setTimeout (async)                  @ index.ts:58
    setTimeoutWrapper                   @ index.ts:58
    scheduleFn                          @ notifyManager.ts:22
    flush                               @ notifyManager.ts:69
    batch                               @ notifyManager.ts:36
    #dispatch                           @ query.ts:611
    setData                             @ query.ts:218
    onSuccess                           @ query.ts:502
    resolve                             @ retryer.ts:110
    Promise.then (async)                @ retryer.ts:110
    run                                 @ retryer.ts:162
    start                               @ retryer.ts:221
    fetch                               @ query.ts:534
    #executeFetch                       @ queryObserver.ts:337
    onSubscribe                         @ queryObserver.ts:98
    subscribe                           @ subscribable.ts:14
    (anonymous)                         @ useBaseQuery.ts:81
    subscribeToStore                    @ react-dom.development.js:16139
    commitHookEffectListMount           @ react-dom.development.js:23189
    commitPassiveMountOnFiber           @ react-dom.development.js:24965
    commitPassiveMountEffects_complete  @ react-dom.development.js:24930
    commitPassiveMountEffects_begin     @ react-dom.development.js:24917
    commitPassiveMountEffects           @ react-dom.development.js:24905
    flushPassiveEffectsImpl             @ react-dom.development.js:27078
    flushPassiveEffects                 @ react-dom.development.js:27023
    performSyncWorkOnRoot               @ react-dom.development.js:26115
    flushSyncCallbacks                  @ react-dom.development.js:12042
    commitRootImpl                      @ react-dom.development.js:26998
    commitRoot                          @ react-dom.development.js:26721
    finishConcurrentRender              @ react-dom.development.js:26020
    performConcurrentWorkOnRoot         @ react-dom.development.js:25848
    workLoop                            @ scheduler.development.js:266
    flushWork                           @ scheduler.development.js:239
    performWorkUntilDeadline            @ scheduler.development.js:533

This is the code I used to hook into setTimeout:

type TimerHandler = (...args: unknown[]) => Promise<void>;

/** Wrap @see {window.setTimeout} and log callback's which take longer than the specified duration. */
function logLongRunningTasks(threshold: number) {
    const originalSetTimeout = window.setTimeout;

    function setTimeoutWrapper(callback: TimerHandler, delay?: number, ...args: unknown[]): number {
        const wrappedCallback: TimerHandler = async () => {
            const start = performance.now();
            await callback(...args);
            const duration = performance.now() - start;
            if (duration > threshold) {
                console.trace(`setTimeout callback took ${duration.toFixed(2)}ms`);
            }
        };
        return originalSetTimeout(wrappedCallback, delay, ...args);
    }

    window.setTimeout = setTimeoutWrapper as typeof window.setTimeout;
}

[nop33]

I have the same question.

[mvaivre]

Same issue on my side.

[nop33]

Could a solution be to use webworkers? But that sounds like too much for just fetching data...