useDebounceEffect.js

/* This is not code written by me. I found it online. */

import { useEffect, useRef } from "react"

/**
 * A debounced useEffect hook that handles async logic and request cancellation.
 * @param {Function} effect - Async function receiving (signal) as an argument.
 * @param {Array} deps - Dependency array.
 * @param {number} delay - Debounce delay in ms.
 */
export function useDebounceEffect(effect, deps, delay = 500) {
  const timeoutRef = useRef(null)
  const controllerRef = useRef(null)

  useEffect(() => {
    // cancel previous timeout and abort previous request if dependencies change
    if (timeoutRef.current) clearTimeout(timeoutRef.current)
    if (controllerRef.current) controllerRef.current.abort()

    const controller = new AbortController()
    controllerRef.current = controller

    timeoutRef.current = setTimeout(() => {
      ;(async () => {
        try {
          await effect(controller.signal)
        } catch (err) {
          if (err.name === "AbortError") return
          console.error("useDebounceEffect error:", err)
        }
      })()
    }, delay)

    // cleanup on unmount or dependency change
    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current)
      if (controllerRef.current) controllerRef.current.abort()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps)
}