useDebouncedCallback

Wrap an imperative function in a stable debounced callback that exposes cancel and flush.

Debounced typeahead

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
 
'@platform-blocks/ui'
;
 
export
 
default
 
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"
 
colorVariant
=
"muted"
>
No
 invocations yet
.
</Text
>
      
)
}
    
</Block
>
  
)
;
}

Platform Blocks

A comprehensive React Native design system with components that work seamlessly across iOS, Android, and Web.

Quick Links

Components Charts Hooks

Documentation

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap