useDebouncedValue

Derive a debounced copy of a changing value so renders and effects react only once it settles.

Debounced search

useDebouncedValue is the declarative pattern: derive a debounced copy of state and read from it during render (or from a useEffect when a real side-effect is involved). Best when the consumer is React-driven. For imperative event handlers, use useDebouncedCallback.

Loading demo…

import
 
{
 useMemo
,
 useState 
}
 
from
 
'react'
;
import
 
{
 
Badge
,
 
Block
,
 
DataList
,
 
Input
,
 
Row
,
 
Text
,
 useDebouncedValue 
}
 
from
 
'@platform-blocks/ui'
;
 
const
 
PACKAGES
 
=
 
[
'react'
,
 
'react native'
,
 
'redux'
,
 
'rxjs'
,
 
'remix'
,
 
'rollup'
]
;
 
export
 
default
 
function
 
Demo
(
)
 
{
  
const
 
[
query
,
 setQuery
]
 
=
 
useState
(
''
)
;
  
const
 
[
debouncedQuery
]
 
=
 
useDebouncedValue
(
query
,
 
300
)
;
 
  
// Derived from the debounced value, so filtering skips intermediate keystrokes.
  
const
 hits 
=
 
useMemo
(
    
(
)
 
=>
 
(
debouncedQuery 
?
 
PACKAGES
.
filter
(
(
name
)
 
=>
 name
.
includes
(
debouncedQuery
.
toLowerCase
(
)
)
)
 
:
 
[
]
)
,
    
[
debouncedQuery
]
  
)
;
 
  
return
 
(
    
<Block
>
      
<Input
        
label
=
"Search packages"
        
placeholder
=
"Type to filter…"
        
value
=
{
query
}
        
onChangeText
=
{
setQuery
}
      
/>
      
<DataList
        
labelWidth
=
{
150
}
        
data
=
{
[
          
{
 label
:
 
'Live'
,
 value
:
 query 
||
 
'—'
 
}
,
          
{
 label
:
 
'Debounced (300ms)'
,
 value
:
 debouncedQuery 
||
 
'—'
 
}
        
]
}
      
/>
      
{
hits
.
length 
?
 
(
        
<Row
 
gap
=
"xs"
 
wrap
=
"wrap"
>
          
{
hits
.
map
(
(
hit
)
 
=>
 
(
            
<Badge
 
key
=
{
hit
}
 
variant
=
"light"
>
{
hit
}
</Badge
>
          
)
)
}
        
</Row
>
      
)
 
:
 
(
        
<Text
 
size
=
"sm"
 
colorVariant
=
"muted"
>
No
 matches
.
</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