UseDebouncedCallback

Interactive JsonSchemaForm JsonTree LottiePlayer MarkdownMessage with Mermaid MarkdownMessage Mermaid OgImageTemplate OpenapiViewer PrettyCode UseQueryParams VideoPlayer

CTASection FeatureSection Hero NewsletterSection StatsSection SuperHero TestimonialSection

useCopy useCountdown useDebounce useDebouncedCallback useDebugTools useDeviceDetect useEventListener useHotkey useImageLoader useIsMobile useLocalStorage useMediaQuery useSessionStorage useThemeContext

Area Chart Bar Chart ChartContainer Donut Chart Line Chart Pie Chart Radial Bar Chart

Aurora Borealis Color Schemes Floating Orbs Geometric Flow AnimatedBackground Liquid Gradient Mesh Gradient Spotlight

122 components

useDebouncedCallback@djangocfg/ui-nextjs

Create a debounced version of a callback function

useDebouncedCallback Hook

Create a debounced version of a callback function

Debounced Search:

Immediate Calls: 0

Every keystroke

API Calls: 0

Debounced (300ms)

Search Results:

No results yet. Start typing to search.

Debounced Scroll Handler:

Scroll Item 1

Scroll Item 2

Scroll Item 3

Scroll Item 4

Scroll Item 5

Scroll Item 6

Scroll Item 7

Scroll Item 8

Scroll Item 9

Scroll Item 10

Scroll Item 11

Scroll Item 12

Scroll Item 13

Scroll Item 14

Scroll Item 15

Scroll Item 16

Scroll Item 17

Scroll Item 18

Scroll Item 19

Scroll Item 20

Scroll Events Processed: 0(500ms delay)

useDebounce vs useDebouncedCallback:

useDebounce: Debounces a value (returns debounced value)
useDebouncedCallback: Debounces a function (returns debounced function)

Usage:

const debouncedSearch = useDebouncedCallback((term: string) => {
  // This function will only run 300ms after the user stops typing
  searchAPI(term);
}, 300);

// Use in event handler
<Input onChange={(e) => debouncedSearch(e.target.value)} />

Import

Loading code...