feat: Add cleanup support to debounce hook

[seer-by-sentry]

Fixes EPICSHOP-63. The issue was that: Un-cancelled debounced function executes post-unmount, triggering a failed insertBefore on the disconnected Mux player web component.

• Adds a cancel method to the debounced function to clear any pending timeouts.
• Introduces a useEffect hook to call cancel when the component unmounts, preventing memory leaks.

This fix was generated by Seer in Sentry, triggered automatically. 👁️ Run ID: 1693079

Not quite right? Click here to continue debugging with Seer.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 5d8ca19

Command	Status	Duration	Result
nx run-many --target build	✅ Succeeded	2s	View ↗
nx run-many --target typecheck	✅ Succeeded	9s	View ↗
nx lint	✅ Succeeded	20s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-01 16:44:25 UTC

[Copilot]

Pull Request Overview

Adds cleanup support to the debounce utility to prevent memory leaks and post-unmount function execution. This addresses an issue where debounced functions were executing after component unmount, causing errors with disconnected DOM elements.

• Enhanced debounce function with a cancel method for clearing pending timeouts
• Added automatic cleanup via useEffect in useDebounce hook to prevent post-unmount execution
• Updated documentation to reflect the new cleanup functionality

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The useEffect dependency on debouncedFn will cause the cleanup effect to re-run whenever the debounced function changes (when delay changes). This creates and destroys cleanup handlers unnecessarily. Consider using useRef to store the debounced function or move the cleanup logic to depend only on unmount.

Suggested change

	const debouncedFn = useMemo(
	() =>
	debounce(
	(...args: Parameters<Callback>) => callbackRef.current(...args),
	delay,
	),
	[delay],
	)
	// Cancel pending timeouts on unmount
	useEffect(() => {
	return () => {
	debouncedFn.cancel()
	}
	}, [debouncedFn])
	return debouncedFn
	const debouncedFnRef = useRef<ReturnType<typeof debounce>>()
	useEffect(() => {
	debouncedFnRef.current = debounce(
	(...args: Parameters<Callback>) => callbackRef.current(...args),
	delay,
	)
	return () => {
	debouncedFnRef.current?.cancel()
	}
	}, [delay])
	return debouncedFnRef.current!