Solid Example: CreateDebouncer
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
})
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.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,
})
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.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,
})
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.executionCount()}</td>
</tr>
<tr>
<td>Saved Executions:</td>
<td>
{instantExecutionCount() - setValueDebouncer.executionCount()}
</td>
</tr>
<tr>
<td>% Reduction:</td>
<td>
{instantExecutionCount() === 0
? '0'
: Math.round(
((instantExecutionCount() -
setValueDebouncer.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
})
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.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,
})
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.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,
})
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.executionCount()}</td>
</tr>
<tr>
<td>Saved Executions:</td>
<td>
{instantExecutionCount() - setValueDebouncer.executionCount()}
</td>
</tr>
<tr>
<td>% Reduction:</td>
<td>
{instantExecutionCount() === 0
? '0'
: Math.round(
((instantExecutionCount() -
setValueDebouncer.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')!,
)
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.