useDebouncedCallback
Wrap an imperative function in a stable debounced callback that exposes
cancel and flush.useDebouncedCallback debounces an imperative function. The returned wrapper has stable identity (safe for useEffect deps) and exposes .cancel() and .flush(). Use this when an event handler should fire a request after a quiet period — that's how <AutoComplete> does its search internally.Loading demo…
import { useState } from 'react';
import { Block, Button, Input, Row, Text, useDebouncedCallback } from '@plocks/ui';
export function Demo() {
const [query, setQuery] = useState('');
const [calls, setCalls] = useState<string[]>([]);
const search = useDebouncedCallback((next: string) => {
setCalls((prev) => [...prev, next]);
}, 300);
return (
<Block>
<Input
label="Search"
placeholder="Type fast…"
description="Invocations are debounced by 300ms."
value={query}
onChangeText={(next) => {
setQuery(next);
search(next);
}}
/>
<Row gap="sm" wrap="wrap">
<Button variant="outline" onPress={() => search.cancel()}>Cancel pending</Button>
<Button variant="ghost" onPress={() => search.flush()}>Flush now</Button>
<Button variant="ghost" onPress={() => setCalls([])}>Reset log</Button>
</Row>
{calls.length ? (
calls.map((call, index) => (
<Text key={index} ff="monospace" size="sm">{`#${index + 1} → "${call}"`}</Text>
))
) : (
<Text size="sm" c="muted">No invocations yet.</Text>
)}
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources