⬅️ Back to Table of Contents

📄 useDebouncedToggle

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	3

📚 Table of Contents

• Imports
• Functions

🛠️ File Location:

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

📦 Imports

Name	Source
useCallback	react
useRef	react
useState	react

---

Functions

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

Parameters:

• value T
• timeout number

Returns: [T, (data: T) => void]

Calls:

• useState (from react)
• useRef (from react)
• useCallback (from react)
• setState
• clearTimeout
• setTimeout

Code

export function useDebouncedToggle<T>(
  value: T,
  timeout = 1000,
): [T, (data: T) => void] {
  const [state, setState] = useState(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];
}

---

Generated by Syntax Scribe