⬅️ Back to Table of Contents

📄 useDebouncedToggle.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	3
📊 Variables & Constants	1

📚 Table of Contents

• Imports
• Variables & Constants
• Functions

🛠️ File Location:

📂 packages/website/src/hooks/useDebouncedToggle.ts

📦 Imports

Name	Source
useCallback	react
useRef	react
useState	react

---

Variables & Constants

Name	Type	Kind	Value	Exported
timeoutId	any	const	timeoutIdRef.current	✗

---

Functions

useDebouncedToggle(value: T, timeout: number): [T, (data: T) => void]

Code

export function useDebouncedToggle<T>(
  value: T,
  timeout = 1000,
): [T, (data: T) => void] {
  const [state, setState] = useState<T>(value);
  const timeoutIdRef = useRef<NodeJS.Timeout>();

  const update = useCallback(
    (data: T) => {
      setState(data);
      const timeoutId = timeoutIdRef.current;
      if (timeoutId) {
        timeoutIdRef.current = undefined;
        clearTimeout(timeoutId);
      }
      timeoutIdRef.current = setTimeout(() => {
        setState(value);
      }, timeout);
    },
    [timeout, value],
  );

  return [state, update];
}

• Parameters:
• value: T
• timeout: number
• Return Type: [T, (data: T) => void]
• Calls:
• useState (from react)
• useRef (from react)
• useCallback (from react)
• setState
• clearTimeout
• setTimeout

---