📄 tanstack/pacer/latest/docs/framework/solid/examples/createDebouncer
File: createDebouncer.md | Updated: 11/15/2025
Source: https://tanstack.com/pacer/latest/docs/framework/solid/examples/createDebouncer
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
Solid
Version
Latest
Search...
+ K
Menu
Getting Started
Guides
API Reference
Debouncer API Reference
Throttler API Reference
Rate Limiter API Reference
Queue API Reference
Batcher API Reference
Debouncer Examples
Throttler Examples
Rate Limiter Examples
Queue Examples
Batcher Examples
Framework
Solid
Version
Latest
Menu
Getting Started
Guides
API Reference
Debouncer API Reference
Throttler API Reference
Rate Limiter API Reference
Queue API Reference
Batcher API Reference
Debouncer Examples
Throttler Examples
Rate Limiter Examples
Queue Examples
Batcher Examples
Solid Example: CreateDebouncer
=====================================================================================================================================================================================================================================================================================================================================================================================================================================
Code ExplorerCode
Interactive SandboxSandbox
-
public
-
src
index.tsx
-
.eslintrc.cjs
-
.gitignore
-
README.md
-
index.html
-
package.json
-
tsconfig.json
-
vite.config.ts
tsx
import { createSignal } from 'solid-js'
import { render } from 'solid-js/web'
import { createDebouncer } from '@tanstack/solid-pacer/debouncer'
function App1() {
// Use your state management library of choice
const [instantCount, setInstantCount] = createSignal(0)
const [debouncedCount, setDebouncedCount] = createSignal(0)
// Lower-level createDebouncer hook - requires you to manage your own state
const setCountDebouncer = createDebouncer(
setDebouncedCount,
{
wait: 500,
// enabled: () => instantCount() > 2, // optional, defaults to true
// leading: true, // optional, defaults to false
},
// Optional Selector function to pick the state you want to track and use
(state) => ({
executionCount: state.executionCount,
}),
)
function increment() {
// this pattern helps avoid common bugs with stale closures and state
setInstantCount((c) => {
const newInstantCount = c + 1 // common new value for both
setCountDebouncer.maybeExecute(newInstantCount) // debounced state update
return newInstantCount // instant state update
})
}
return (
<div>
<h1>TanStack Pacer createDebouncer Example 1</h1>
<table>
<tbody>
<tr>
<td>Execution Count:</td>
<td>{setCountDebouncer.state().executionCount}</td>
</tr>
<tr>
<td colSpan={2}>
<hr />
</td>
</tr>
<tr>
<td>Instant Count:</td>
<td>{instantCount()}</td>
</tr>
<tr>
<td>Debounced Count:</td>
<td>{debouncedCount()}</td>
</tr>
</tbody>
</table>
<div>
<button onClick={increment}>Increment</button>
</div>
</div>
)
}
function App2() {
const [searchText, setSearchText] = createSignal('')
const [debouncedSearchText, setDebouncedSearchText] = createSignal('')
// Lower-level createDebouncer hook - requires you to manage your own state
const setSearchDebouncer = createDebouncer(
setDebouncedSearchText,
{
wait: 500,
enabled: () => searchText().length > 2,
},
// Optional Selector function to pick the state you want to track and use
(state) => ({
executionCount: state.executionCount,
}),
)
function handleSearchChange(e: Event) {
const target = e.target as HTMLInputElement
const newValue = target.value
setSearchText(newValue)
setSearchDebouncer.maybeExecute(newValue)
}
return (
<div>
<h1>TanStack Pacer createDebouncer Example 2</h1>
<div>
<input
autofocus
type="search"
value={searchText()}
onInput={handleSearchChange}
placeholder="Type to search..."
style={{ width: '100%' }}
/>
</div>
<table>
<tbody>
<tr>
<td>Execution Count:</td>
<td>{setSearchDebouncer.state().executionCount}</td>
</tr>
<tr>
<td colSpan={2}>
<hr />
</td>
</tr>
<tr>
<td>Instant Search:</td>
<td>{searchText()}</td>
</tr>
<tr>
<td>Debounced Search:</td>
<td>{debouncedSearchText()}</td>
</tr>
</tbody>
</table>
</div>
)
}
function App3() {
const [currentValue, setCurrentValue] = createSignal(50)
const [debouncedValue, setDebouncedValue] = createSignal(50)
const [instantExecutionCount, setInstantExecutionCount] = createSignal(0)
// Lower-level createDebouncer hook - requires you to manage your own state
const setValueDebouncer = createDebouncer(
setDebouncedValue,
{
wait: 250,
},
// Optional Selector function to pick the state you want to track and use
(state) => ({
executionCount: state.executionCount,
}),
)
function handleRangeChange(e: Event) {
const target = e.target as HTMLInputElement
const newValue = parseInt(target.value, 10)
setCurrentValue(newValue)
setInstantExecutionCount((c) => c + 1)
setValueDebouncer.maybeExecute(newValue)
}
return (
<div>
<h1>TanStack Pacer createDebouncer Example 3</h1>
<div style={{ 'margin-bottom': '20px' }}>
<label>
Current Range:
<input
type="range"
min="0"
max="100"
value={currentValue()}
onInput={handleRangeChange}
style={{ width: '100%' }}
/>
<span>{currentValue()}</span>
</label>
</div>
<div style={{ 'margin-bottom': '20px' }}>
<label>
Debounced Range (Readonly):
<input
type="range"
min="0"
max="100"
value={debouncedValue()}
readOnly
style={{ width: '100%' }}
/>
<span>{debouncedValue()}</span>
</label>
</div>
<table>
<tbody>
<tr>
<td>Instant Executions:</td>
<td>{instantExecutionCount()}</td>
</tr>
<tr>
<td>Debounced Executions:</td>
<td>{setValueDebouncer.state().executionCount}</td>
</tr>
<tr>
<td>Saved Executions:</td>
<td>
{instantExecutionCount() -
setValueDebouncer.state().executionCount}
</td>
</tr>
<tr>
<td>% Reduction:</td>
<td>
{instantExecutionCount() === 0
? '0'
: Math.round(
((instantExecutionCount() -
setValueDebouncer.state().executionCount) /
instantExecutionCount()) *
100,
)}
%
</td>
</tr>
</tbody>
</table>
<div style={{ color: '#666', 'font-size': '0.9em' }}>
<p>Debounced with 250ms wait time</p>
</div>
</div>
)
}
render(
() => (
<div>
<App1 />
<hr />
<App2 />
<hr />
<App3 />
</div>
),
document.getElementById('root')!,
)
import { createSignal } from 'solid-js'
import { render } from 'solid-js/web'
import { createDebouncer } from '@tanstack/solid-pacer/debouncer'
function App1() {
// Use your state management library of choice
const [instantCount, setInstantCount] = createSignal(0)
const [debouncedCount, setDebouncedCount] = createSignal(0)
// Lower-level createDebouncer hook - requires you to manage your own state
const setCountDebouncer = createDebouncer(
setDebouncedCount,
{
wait: 500,
// enabled: () => instantCount() > 2, // optional, defaults to true
// leading: true, // optional, defaults to false
},
// Optional Selector function to pick the state you want to track and use
(state) => ({
executionCount: state.executionCount,
}),
)
function increment() {
// this pattern helps avoid common bugs with stale closures and state
setInstantCount((c) => {
const newInstantCount = c + 1 // common new value for both
setCountDebouncer.maybeExecute(newInstantCount) // debounced state update
return newInstantCount // instant state update
})
}
return (
<div>
<h1>TanStack Pacer createDebouncer Example 1</h1>
<table>
<tbody>
<tr>
<td>Execution Count:</td>
<td>{setCountDebouncer.state().executionCount}</td>
</tr>
<tr>
<td colSpan={2}>
<hr />
</td>
</tr>
<tr>
<td>Instant Count:</td>
<td>{instantCount()}</td>
</tr>
<tr>
<td>Debounced Count:</td>
<td>{debouncedCount()}</td>
</tr>
</tbody>
</table>
<div>
<button onClick={increment}>Increment</button>
</div>
</div>
)
}
function App2() {
const [searchText, setSearchText] = createSignal('')
const [debouncedSearchText, setDebouncedSearchText] = createSignal('')
// Lower-level createDebouncer hook - requires you to manage your own state
const setSearchDebouncer = createDebouncer(
setDebouncedSearchText,
{
wait: 500,
enabled: () => searchText().length > 2,
},
// Optional Selector function to pick the state you want to track and use
(state) => ({
executionCount: state.executionCount,
}),
)
function handleSearchChange(e: Event) {
const target = e.target as HTMLInputElement
const newValue = target.value
setSearchText(newValue)
setSearchDebouncer.maybeExecute(newValue)
}
return (
<div>
<h1>TanStack Pacer createDebouncer Example 2</h1>
<div>
<input
autofocus
type="search"
value={searchText()}
onInput={handleSearchChange}
placeholder="Type to search..."
style={{ width: '100%' }}
/>
</div>
<table>
<tbody>
<tr>
<td>Execution Count:</td>
<td>{setSearchDebouncer.state().executionCount}</td>
</tr>
<tr>
<td colSpan={2}>
<hr />
</td>
</tr>
<tr>
<td>Instant Search:</td>
<td>{searchText()}</td>
</tr>
<tr>
<td>Debounced Search:</td>
<td>{debouncedSearchText()}</td>
</tr>
</tbody>
</table>
</div>
)
}
function App3() {
const [currentValue, setCurrentValue] = createSignal(50)
const [debouncedValue, setDebouncedValue] = createSignal(50)
const [instantExecutionCount, setInstantExecutionCount] = createSignal(0)
// Lower-level createDebouncer hook - requires you to manage your own state
const setValueDebouncer = createDebouncer(
setDebouncedValue,
{
wait: 250,
},
// Optional Selector function to pick the state you want to track and use
(state) => ({
executionCount: state.executionCount,
}),
)
function handleRangeChange(e: Event) {
const target = e.target as HTMLInputElement
const newValue = parseInt(target.value, 10)
setCurrentValue(newValue)
setInstantExecutionCount((c) => c + 1)
setValueDebouncer.maybeExecute(newValue)
}
return (
<div>
<h1>TanStack Pacer createDebouncer Example 3</h1>
<div style={{ 'margin-bottom': '20px' }}>
<label>
Current Range:
<input
type="range"
min="0"
max="100"
value={currentValue()}
onInput={handleRangeChange}
style={{ width: '100%' }}
/>
<span>{currentValue()}</span>
</label>
</div>
<div style={{ 'margin-bottom': '20px' }}>
<label>
Debounced Range (Readonly):
<input
type="range"
min="0"
max="100"
value={debouncedValue()}
readOnly
style={{ width: '100%' }}
/>
<span>{debouncedValue()}</span>
</label>
</div>
<table>
<tbody>
<tr>
<td>Instant Executions:</td>
<td>{instantExecutionCount()}</td>
</tr>
<tr>
<td>Debounced Executions:</td>
<td>{setValueDebouncer.state().executionCount}</td>
</tr>
<tr>
<td>Saved Executions:</td>
<td>
{instantExecutionCount() -
setValueDebouncer.state().executionCount}
</td>
</tr>
<tr>
<td>% Reduction:</td>
<td>
{instantExecutionCount() === 0
? '0'
: Math.round(
((instantExecutionCount() -
setValueDebouncer.state().executionCount) /
instantExecutionCount()) *
100,
)}
%
</td>
</tr>
</tbody>
</table>
<div style={{ color: '#666', 'font-size': '0.9em' }}>
<p>Debounced with 250ms wait time</p>
</div>
</div>
)
}
render(
() => (
<div>
<App1 />
<hr />
<App2 />
<hr />
<App3 />
</div>
),
document.getElementById('root')!,
)
