ac1e3cf69e
Implements a form state task queue. This will prevent onChange handlers within the form component from processing unnecessarily often, sometimes long after the user has stopped making changes. This leads to a potentially huge number of network requests if those changes were made slower than the debounce rate. This is especially noticeable on slow networks. Does so through a new `useQueue` hook. This hook maintains a stack of events that need processing but only processes the final event to arrive. Every time a new event is pushed to the stack, the currently running process is aborted (if any), and that event becomes the next in the queue. This results in a shocking reduction in the time it takes between final change to form state and the final network response, from ~1.5 minutes to ~3 seconds (depending on the scenario, see below). This likely fixes a number of existing open issues. I will link those issues here once they are identified and verifiably fixed. Before: I'm typing slowly here to ensure my changes aren't debounce by the form. There are a total of 60 characters typed, triggering 58 network requests and taking around 1.5 minutes to complete after the final change was made. https://github.com/user-attachments/assets/49ba0790-a8f8-4390-8421-87453ff8b650 After: Here there are a total of 69 characters typed, triggering 11 network requests and taking only about 3 seconds to complete after the final change was made. https://github.com/user-attachments/assets/447f8303-0957-41bd-bb2d-9e1151ed9ec3
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { useRef } from 'react'
|
|
|
|
export function useQueues(): {
|
|
queueTask: (fn: (signal: AbortSignal) => Promise<void>) => void
|
|
} {
|
|
const runningTaskRef = useRef<null | Promise<void>>(null)
|
|
const queuedTask = useRef<((signal: AbortSignal) => Promise<void>) | null>(null)
|
|
const abortControllerRef = useRef<AbortController | null>(null)
|
|
|
|
const queueTask = (fn: (signal: AbortSignal) => Promise<void>) => {
|
|
// Overwrite the queued task every time a new one arrives
|
|
queuedTask.current = fn
|
|
|
|
// If a task is already running, abort it and return
|
|
if (runningTaskRef.current !== null) {
|
|
if (abortControllerRef.current) {
|
|
abortControllerRef.current.abort()
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
const executeTask = async () => {
|
|
while (queuedTask.current) {
|
|
const taskToRun = queuedTask.current
|
|
queuedTask.current = null // Reset latest task before running
|
|
|
|
const controller = new AbortController()
|
|
abortControllerRef.current = controller
|
|
|
|
try {
|
|
runningTaskRef.current = taskToRun(controller.signal)
|
|
await runningTaskRef.current // Wait for the task to complete
|
|
} catch (err) {
|
|
if (err.name !== 'AbortError') {
|
|
console.error('Error in queued function:', err) // eslint-disable-line no-console
|
|
}
|
|
} finally {
|
|
runningTaskRef.current = null
|
|
}
|
|
}
|
|
}
|
|
|
|
void executeTask()
|
|
}
|
|
|
|
return { queueTask }
|
|
}
|