Back to all snippets
Library/React/useDebounce Hook
typescriptintermediatehooksperformanceoptimization

How to implement useDebounce Hook in Typescript

React hook to debounce any value

Quick Answer

useDebounce returns a delayed copy of a value that only updates after the user has stopped changing it for the specified number of milliseconds. It is the React-idiomatic way to avoid firing API calls on every keystroke.

Code Snippet

1import { useState, useEffect } from 'react';
2
3function useDebounce<T>(value: T, delay: number): T {
4  const [debouncedValue, setDebouncedValue] = useState<T>(value);
5
6  useEffect(() => {
7    const handler = setTimeout(() => {
8      setDebouncedValue(value);
9    }, delay);
10
11    return () => {
12      clearTimeout(handler);
13    };
14  }, [value, delay]);
15
16  return debouncedValue;
17}

What is useDebounce Hook?

useDebounce delays propagating a value change until a specified period of inactivity. This is the React-idiomatic way to debounce — rather than debouncing functions directly, you debounce the value and react to the debounced version in useEffect or wherever you need it.

How It Works

  1. 1The hook stores the debounced value in its own useState.
  2. 2Every time value or delay changes, a new setTimeout is scheduled.
  3. 3The cleanup function returned from useEffect clears the previous timeout.
  4. 4After delay milliseconds of no new changes, the debounced state is updated.
  5. 5The component using debouncedValue re-renders only then.

Common Use Cases

  • Search inputs - Only query the API after the user stops typing
  • Live previews - Render expensive previews after editing pauses
  • Autocomplete - Reduce suggestions fetches to save API quota
  • Window resize - Recalculate layout only after resizing stops

Key Benefits

  • Works with any value type, not just functions
  • Composable with other hooks like useEffect and useMemo
  • Cleans up timers on unmount to prevent memory leaks
  • Tiny and dependency-free

Common Mistakes to Avoid

  • Using too long a delay — 200–400 ms is right for search; 100 ms may be better for previews.
  • Forgetting that the debounced value lags behind the live value — do not use it for immediate validation.
  • Recreating the component on every render, which resets the timer.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more typescript examples

Frequently Asked Questions

Should I debounce the function or the value in React?

Debouncing the value with useDebounce is more composable in React because you can react to the debounced value anywhere — in useEffect, useMemo, or a query hook.

What is a good debounce delay for a search input?

300 ms is the standard. It feels responsive to fast typists but avoids firing on every individual keystroke.

Does useDebounce cancel the timeout on unmount?

Yes. The useEffect cleanup function calls clearTimeout when the component unmounts, preventing state updates on unmounted components.

Related Snippets

typescript
intermediate
useLocalStorage Hook
React hook for managing state synchronized with localStorage
hooksstoragestate

About This Typescript Code Snippet

This free typescript code snippet for usedebounce hook is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this intermediate-level example will help you implement usedebounce hook quickly and correctly.

All snippets in the Snippetly library follow typescript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses typescript.

Tags: hooks, performance, optimization  | Language: typescript  | Difficulty: intermediate  | Category: React

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets