+
+ )
+}
+
+const root = document.getElementById('root')!
+render(TanStack Pacer asyncBatch Example
+ +
+
+
+ Batch Status
+Pending Items: {pendingItems.length}
+ Max Batch Size: 5
+ Is Processing: {isProcessing ? 'Yes' : 'No'}
+ Successful Batches: {successCount}
+ Failed Batches: {errorCount}
+
+
+
+ Current Pending Items
+
+ {pendingItems.length === 0 ? (
+ No items pending
+ ) : (
+ pendingItems.map((item, index) => (
+
+
+ {index + 1}: {item.value} (added at{' '}
+ {new Date(item.timestamp).toLocaleTimeString()})
+
+ ))
+ )}
+
+
+
+ Controls
+
+
+
+
+
+
+
+
+
+
+
+ {errors.length > 0 && (
+ Processed Batches ({processedBatches.length})
+
+ {processedBatches.length === 0 ? (
+ No batches processed yet
+ ) : (
+ processedBatches.map((batch, index) => (
+
+
+ Batch {index + 1} (processed at{' '}
+ {new Date(batch.timestamp).toLocaleTimeString()})
+
+ ))
+ )}
+ {batch.result}
+
+
+ )}
+ Errors ({errors.length})
+
+ {errors.map((error, index) => (
+
+
+ {error}
+ ))}
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(TanStack Pacer asyncDebounce Example
+
+ {
+ const newValue = e.currentTarget.value
+ setSearchText(newValue)
+ debouncedSetSearch(newValue)
+ }}
+ placeholder="Type to search..."
+ style={{ width: '100%' }}
+ />
+ {loading &&
+ Loading...
}
+ | Instant Search: | +{searchText} | +
| Debounced Search: | +{debouncedSearchText} | +
+
+ Search Results:
+-
+ {searchResults.map((result, i) => (
+
- {result} + ))} +
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(TanStack Pacer asyncRateLimit Example
+
+
+
+
+
+ {
+ const newValue = e.currentTarget.value
+ setSearchText(newValue)
+ rateLimitedSetSearch(newValue)
+ }}
+ placeholder="Type to search..."
+ style={{ width: '100%' }}
+ />
+ {loading &&
+ Loading...
}
+ | Instant Search: | +{searchText} | +
| Rate Limited Search: | +{rateLimitedSearchText} | +
+
+ Search Results:
+-
+ {searchResults.map((result, i) => (
+
- {result} + ))} +
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(TanStack Pacer asyncRetry Example
++ Demonstrates the asyncRetry utility function with configurable backoff + strategies, timeouts, jitter, and error handling. +
+ +
+
+
+
+
+
+ Configuration
+
+
+
+
+
+
+
+ setUserId(e.currentTarget.value)}
+ placeholder="Enter user ID..."
+ style={{ padding: '5px', width: '100%' }}
+ disabled={isLoading}
+ />
+
+
+
+
+
+
+
+
+
+ Current Options:
+
+ {(() => {
+ const opts = getOptions()
+ return JSON.stringify(
+ {
+ maxAttempts: opts.maxAttempts,
+ backoff: opts.backoff,
+ baseWait: opts.baseWait,
+ jitter: opts.jitter,
+ maxExecutionTime:
+ 'maxExecutionTime' in opts
+ ? opts.maxExecutionTime
+ : Infinity,
+ maxTotalExecutionTime:
+ 'maxTotalExecutionTime' in opts
+ ? opts.maxTotalExecutionTime
+ : Infinity,
+ },
+ null,
+ 2,
+ )
+ })()}
+
+
+
+ State
+
+
+
+ {userData && (
+
+ Status:{' '}
+ 1
+ ? '#ff8c00'
+ : '#ffd700'
+ : '#90ee90',
+ }}
+ >
+ {isLoading
+ ? currentAttempt > 1
+ ? 'retrying'
+ : 'executing'
+ : 'idle'}
+
+
+ {currentAttempt > 0 && (
+ + Current Attempt: {currentAttempt} /{' '} + {(() => { + const opts = getOptions() + return opts.maxAttempts + })()} +
+ )} + {error && ( +
+ Error:
+
+ {error} +
+ )}
+ + {error} +
+
+ )}
+ User Data:
++ ID: {userData.id} +
++ Name: {userData.name} +
++ Email: {userData.email} +
+
+
+
+ Activity Log
+
+ {logs.length === 0 ? (
+
+ No activity yet
+ ) : (
+ logs.map((log, i) => (
+
+ {log}
+
+ ))
+ )}
+
+ Note: This example uses the
+
+ asyncRetry{' '}
+ utility function, which creates a retry-enabled version of your async
+ function. Each call to the retry-enabled function creates a fresh retry
+ context.
+
+ Key Features:
+
+ -
+
- + Exponential Backoff: Wait time doubles with each + retry (1s, 2s, 4s, ...) + +
- + Linear Backoff: Wait time increases linearly (1s, + 2s, 3s, ...) + +
- + Jitter: Adds randomness to prevent thundering herd + problems + +
- + Timeouts: Control individual and total execution + time + +
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(TanStack Pacer asyncThrottle Example
+
+ {
+ const newValue = e.currentTarget.value
+ setSearchText(newValue)
+ throttledSetSearch(newValue)
+ }}
+ placeholder="Type to search..."
+ style={{ width: '100%' }}
+ />
+ {loading &&
+ Loading...
}
+ | Instant Search: | +{searchText} | +
| Throttled Search: | +{throttledSearchText} | +
+
+ Search Results:
+-
+ {searchResults.map((result, i) => (
+
- {result} + ))} +
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(TanStack Pacer batcher Example
+Batch Items: {batchItems.join(', ')}
+
+ Processed Batches:{' '}
+ {processedBatches.map((b, i) => (
+ [{b.join(', ')}],
+ ))}
+
+
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [searchText, setSearchText] = useState('')
+ const [debouncedSearchText, setDebouncedSearchText] = useState('')
+
+ // Create debounced setter function - Stable reference required!
+ const debouncedSetSearch = useCallback(
+ debounce(setDebouncedSearchText, {
+ wait: 500,
+ }),
+ [],
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer debounce Example 1
+| Instant Count: | +{instantCount} | +
| Debounced Count: | +{debouncedCount} | +
+
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [instantValue, setInstantValue] = useState(50)
+ const [debouncedValue, setDebouncedValue] = useState(50)
+
+ // Create debounced setter function - Stable reference required!
+ const debouncedSetValue = useCallback(
+ debounce(setDebouncedValue, {
+ wait: 250,
+ }),
+ [],
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer debounce Example 2
+
+
+
+ | Instant Search: | +{searchText} | +
| Debounced Search: | +{debouncedSearchText} | +
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer debounce Example 3
+
+
+
+
+
+
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/debounce/tsconfig.json b/examples/preact/debounce/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/debounce/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/debounce/vite.config.ts b/examples/preact/debounce/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/debounce/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/queue/README.md b/examples/preact/queue/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/queue/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/queue/index.html b/examples/preact/queue/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/queue/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [queueItems, setQueueItems] = useStateTanStack Pacer queue Example 1
+| Queue Size: | +{queueItems.length} | +
| Items Processed: | +{processedCount} | +
| Queue Items: | +{queueItems.join(', ')} | +
+
+
+
+
+ )
+}
+
+function App3() {
+ const [queueItems, setQueueItems] = useStateTanStack Pacer queue Example 2
+
+
+
+ | Queued Text: | +{queuedText} | +
| Queue Size: | +{queueItems.length} | +
| Items Processed: | +{processedCount} | +
| Queue Items: | +{queueItems.join(', ')} | +
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer queue Example 3
+
+
+
+
+
+
+ | Queue Size: | +{queueItems.length} | +
| Items Processed: | +{processedCount} | +
| Queue Items: | +{queueItems.join(', ')} | +
+
+
+
,
+ root,
+)
diff --git a/examples/preact/queue/tsconfig.json b/examples/preact/queue/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/queue/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/queue/vite.config.ts b/examples/preact/queue/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/queue/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/rateLimit/README.md b/examples/preact/rateLimit/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/rateLimit/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/rateLimit/index.html b/examples/preact/rateLimit/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/rateLimit/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [windowType, setWindowType] = useState<'fixed' | 'sliding'>('fixed')
+ const [text, setText] = useState('')
+ const [rateLimitedText, setRateLimitedText] = useState('')
+
+ // Create rate-limited setter function - Stable reference required!
+ const rateLimitedSetText = useCallback(
+ rateLimit(setRateLimitedText, {
+ limit: 5,
+ window: 5000,
+ windowType: windowType,
+ onReject: (rateLimiter) =>
+ console.log(
+ 'Rejected by rate limiter',
+ rateLimiter.getMsUntilNextWindow(),
+ ),
+ }),
+ [windowType],
+ )
+
+ function handleTextChange(e: JSX.TargetedEventTanStack Pacer rateLimit Example 1
+
+
+
+
+ | Instant Count: | +{instantCount} | +
| Rate Limited Count: | +{rateLimitedCount} | +
+
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [windowType, setWindowType] = useState<'fixed' | 'sliding'>('fixed')
+ const [currentValue, setCurrentValue] = useState(50)
+ const [rateLimitedValue, setRateLimitedValue] = useState(50)
+
+ // Create rate-limited setter function - Stable reference required!
+ const rateLimitedSetValue = useCallback(
+ rateLimit(setRateLimitedValue, {
+ limit: 30,
+ window: 2000,
+ windowType: windowType,
+ onReject: (rateLimiter) =>
+ console.log(
+ 'Rejected by rate limiter',
+ rateLimiter.getMsUntilNextWindow(),
+ ),
+ }),
+ [windowType],
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer rateLimit Example 2
+
+
+
+
+
+
+
+ | Instant Text: | +{text} | +
| Rate Limited Text: | +{rateLimitedText} | +
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer rateLimit Example 3
+
+
+
+
+
+
+
+
+
+
+
+
+ Rate limited to 30 updates per 2000ms window
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/rateLimit/tsconfig.json b/examples/preact/rateLimit/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/rateLimit/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/rateLimit/vite.config.ts b/examples/preact/rateLimit/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/rateLimit/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/throttle/README.md b/examples/preact/throttle/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/throttle/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/throttle/index.html b/examples/preact/throttle/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/throttle/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [text, setText] = useState('')
+ const [throttledText, setThrottledText] = useState('')
+
+ // Create throttled setter function - Stable reference required!
+ const throttledSetText = useCallback(
+ throttle(setThrottledText, {
+ wait: 1000,
+ }),
+ [],
+ )
+
+ function handleTextChange(e: JSX.TargetedEventTanStack Pacer throttle Example 1
+| Instant Count: | +{instantCount} | +
| Throttled Count: | +{throttledCount} | +
+
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [throttledValue, setThrottledValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ // Create throttled setter function - Stable reference required!
+ const throttledSetValue = useCallback(
+ throttle(setThrottledValue, {
+ wait: 250,
+ }),
+ [],
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer throttle Example 2
+
+
+
+ | Instant Text: | +{text} | +
| Throttled Text: | +{throttledText} | +
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer throttle Example 3
+
+
+
+
+
+
+ | Instant Executions: | +{instantExecutionCount} | +
+
+ Throttled with 250ms wait time
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/throttle/tsconfig.json b/examples/preact/throttle/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/throttle/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/throttle/vite.config.ts b/examples/preact/throttle/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/throttle/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useAsyncBatchedCallback/README.md b/examples/preact/useAsyncBatchedCallback/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useAsyncBatchedCallback/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useAsyncBatchedCallback/index.html b/examples/preact/useAsyncBatchedCallback/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useAsyncBatchedCallback/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ )
+}
+
+interface EmailValidationRequest {
+ email: string
+ timestamp: Date
+}
+
+interface EmailValidationResult {
+ email: string
+ isValid: boolean
+ message: string
+}
+
+// Simulate batched email validation API
+const batchValidateEmails = async (
+ requests: ArrayTanStack Pacer useAsyncBatchedCallback Example 1
+
+
+
+
+
+
+
+ {isLoading && Processing batch search...
} + {error &&Error: {error}
} + +| Total Searches Made: | +{searchQueries.length} | +
| Results Found: | +{results.length} | +
| Batches Processed: | +{batchesProcessed} | +
+
+
+ Search Results:
+
+ {results.length === 0 ? (
+
+ No results yet...
+ ) : ( + results.map((result) => ( +
+ {result.query}: {result.title}
+
+ ))
+ )}
+ + Searches are batched - max 3 queries or 2 second wait time +
+
+
+
+
+
+
+ )
+}
+
+interface DataPoint {
+ id: string
+ value: number
+ category: string
+}
+
+// Simulate batched data processing API
+const batchProcessData = async (
+ dataPoints: ArrayTanStack Pacer useAsyncBatchedCallback Example 2
+
+ {sampleEmails.map((email, index) => (
+
+ ))}
+
+
+ {isValidating && (
+ Validating email batch...
+ )} + +| Total Validations Requested: | +{emailRequests.length} | +
| Validations Completed: | +{validationResults.length} | +
| Batches Processed: | +{batchesProcessed} | +
+
+
+ Validation Results:
+
+ {validationResults.length === 0 ? (
+
+ No validations completed yet...
+ ) : ( + validationResults.map((result, index) => ( +
+ {result.email}: {result.message}
+
+ ))
+ )}
+ + Email validations are batched - max 4 emails or 1.5 second wait time +
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useAsyncBatchedCallback Example 3
+
+
+
+
+
+
+
+ {isProcessing && (
+ Processing data batch...
+ )} + +| Data Points Queued: | +{dataQueue.length} | +
| Data Points Processed: | +{processedData.length} | +
| Batches Completed: | +{batchesProcessed} | +
+
+
+
+
+
+ Processed Data:
+
+ {processedData.length === 0 ? (
+
+ No data processed yet...
+ ) : ( + processedData.map((point) => ( +
+ {point.category}: {point.value} ({point.id})
+
+ ))
+ )}
+
+
+ Batch Summaries:
+
+ {summaries.length === 0 ? (
+
+ No summaries yet...
+ ) : ( + summaries.map((summary, index) => ( +
+ Batch {index + 1}: {summary.totalItems}{' '}
+ items, total value: {summary.totalValue}, categories:{' '}
+ {summary.categories}
+
+ ))
+ )}
+ + Data processing is batched - max 5 items or 2.5 second wait time +
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useAsyncBatchedCallback/tsconfig.json b/examples/preact/useAsyncBatchedCallback/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useAsyncBatchedCallback/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useAsyncBatchedCallback/vite.config.ts b/examples/preact/useAsyncBatchedCallback/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useAsyncBatchedCallback/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useAsyncBatcher/README.md b/examples/preact/useAsyncBatcher/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useAsyncBatcher/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useAsyncBatcher/index.html b/examples/preact/useAsyncBatcher/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useAsyncBatcher/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ // optionally, provide default options to an optional PacerProvider
+ TanStack Pacer useAsyncBatcher Example
+ +
+
+
+ Batch Status
+Current Batch Size: {asyncBatcher.state.size}
+ Max Batch Size: 5
+ Is Executing: {asyncBatcher.state.isExecuting ? 'Yes' : 'No'}
+ Status: {asyncBatcher.state.status}
+ Successful Batches: {asyncBatcher.state.successCount}
+ Failed Batches: {asyncBatcher.state.errorCount}
+
+ Total Items Processed: {asyncBatcher.state.totalItemsProcessed}
+
+
+
+
+ Current Batch Items
+
+ {asyncBatcher.peekAllItems().length === 0 ? (
+ No items in current batch
+ ) : (
+ asyncBatcher.peekAllItems().map((item, index) => (
+
+
+ {index + 1}: {item.value} (added at{' '}
+ {new Date(item.timestamp).toLocaleTimeString()})
+
+ ))
+ )}
+
+
+
+ Controls
+
+
+
+
+
+
+
+
+
+ {errors.length > 0 && (
+ Processed Batches ({processedBatches.length})
+
+ {processedBatches.length === 0 ? (
+ No batches processed yet
+ ) : (
+ processedBatches.map((batch, index) => (
+
+
+ Batch {index + 1} (processed at{' '}
+ {new Date(batch.timestamp).toLocaleTimeString()})
+
+ ))
+ )}
+ {batch.result}
+
+
+ )}
+
+ Errors ({errors.length})
+
+ {errors.map((error, index) => (
+
+
+ {error}
+ ))}
+
+ {JSON.stringify(asyncBatcher.store.state, null, 2)}
+
+
+
+ )
+}
+
+function App2() {
+ const [count, setCount] = useState(0)
+ const [apiCallCount, setApiCallCount] = useState(0)
+
+ // Simulate API call that returns a value
+ const incrementApi = async (value: number): PromiseTanStack Pacer useAsyncDebouncedCallback Example 1
+
+
+
+
+ {isLoading && Searching...
} + {error &&Error: {error}
} + +
+
+ Current search term: {searchTerm}
+ {results.length > 0 && ( +
+
+ )}
+ Results:
+-
+ {results.map((result) => (
+
- {result.title} + ))} +
+
+
+
+
+ )
+}
+
+function App3() {
+ const [email, setEmail] = useState('')
+ const [validationResult, setValidationResult] = useState<{
+ isValid: boolean
+ message: string
+ } | null>(null)
+ const [isValidating, setIsValidating] = useState(false)
+
+ // Simulate email validation API
+ const validateEmail = async (
+ emailAddress: string,
+ ): Promise<{ isValid: boolean; message: string }> => {
+ await new Promise((resolve) => setTimeout(resolve, 400))
+
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+ const isValid = emailRegex.test(emailAddress)
+
+ return {
+ isValid,
+ message: isValid
+ ? 'Email is valid!'
+ : 'Please enter a valid email address',
+ }
+ }
+
+ // Create debounced validation function
+ const debouncedValidateEmail = useAsyncDebouncedCallback(
+ async (emailAddress: string) => {
+ if (!emailAddress.trim()) {
+ setValidationResult(null)
+ return null
+ }
+
+ setIsValidating(true)
+
+ try {
+ const result = await validateEmail(emailAddress)
+ setValidationResult(result)
+ return result
+ } finally {
+ setIsValidating(false)
+ }
+ },
+ {
+ wait: 750,
+ leading: false,
+ },
+ )
+
+ function handleEmailChange(e: JSX.TargetedEventTanStack Pacer useAsyncDebouncedCallback Example 2
+| Current Count: | +{count} | +
| API Calls Made: | +{apiCallCount} | +
+
+
+ + Click rapidly - API calls are debounced to 1 second, but UI updates + immediately +
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useAsyncDebouncedCallback Example 3
+
+
+
+
+ {isValidating && Validating email...
} + + {validationResult && ( ++ {validationResult.message} +
+ )} + ++ Email validation is debounced to 750ms after you stop typing +
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useAsyncDebouncedCallback/tsconfig.json b/examples/preact/useAsyncDebouncedCallback/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useAsyncDebouncedCallback/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useAsyncDebouncedCallback/vite.config.ts b/examples/preact/useAsyncDebouncedCallback/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useAsyncDebouncedCallback/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useAsyncDebouncer/README.md b/examples/preact/useAsyncDebouncer/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useAsyncDebouncer/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useAsyncDebouncer/index.html b/examples/preact/useAsyncDebouncer/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useAsyncDebouncer/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+
+function renderApp(mounted: boolean) {
+ render(
+ mounted ? (
+ // defaultOptions can be provided to the PacerProvider to set default options for all instances
+ TanStack Pacer useAsyncDebouncer Example
+
+
+
+
+
+
+
+
+ API calls made: {asyncDebouncer.state.successCount}
+ {results.length > 0 && ( +-
+ {results.map((item) => (
+
- {item.title} + ))} +
Pending...
} + {asyncDebouncer.state.isExecuting &&Executing...
} +
+ {JSON.stringify(asyncDebouncer.store.state, null, 2)}
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(TanStack Pacer useAsyncQueuer Example
+ +Queue Size: {asyncQueuer.state.size}
+ Queue Max Size: {25}
+ Queue Full: {asyncQueuer.state.isFull ? 'Yes' : 'No'}
+ Queue Empty: {asyncQueuer.state.isEmpty ? 'Yes' : 'No'}
+ Queue Idle: {asyncQueuer.state.isIdle ? 'Yes' : 'No'}
+ Queuer Status: {asyncQueuer.state.status}
+ Items Processed: {asyncQueuer.state.successCount}
+ Items Rejected: {asyncQueuer.state.rejectionCount}
+ Active Tasks: {asyncQueuer.peekActiveItems().length}
+ Pending Tasks: {asyncQueuer.peekPendingItems().length}
+
+ Concurrency:{' '}
+
+ setConcurrency(Math.max(1, parseInt(e.currentTarget.value) || 1))
+ }
+ style={{ width: '60px' }}
+ />
+
+
+ Queue Items:
+ {queueItems.map((item, index) => (
+
+
+ {index}: {item}
+
+ ))}
+
+
+
+
+
+ + +
+ + + +
+ {JSON.stringify(asyncQueuer.store.state, null, 2)}
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ // optionally, provide default options to an optional PacerProvider
+ TanStack Pacer useAsyncQueuer Example
+ +Queue Size: {asyncQueuer.state.size}
+ Queue Max Size: {25}
+ Queue Full: {asyncQueuer.state.isFull ? 'Yes' : 'No'}
+ Queue Empty: {asyncQueuer.state.isEmpty ? 'Yes' : 'No'}
+ Queue Idle: {asyncQueuer.state.isIdle ? 'Yes' : 'No'}
+ Queuer Status: {asyncQueuer.state.status}
+ Items Processed: {asyncQueuer.state.successCount}
+ Items Rejected: {asyncQueuer.state.rejectionCount}
+ Active Tasks: {asyncQueuer.state.activeItems.length}
+ Pending Tasks: {asyncQueuer.state.items.length}
+
+ Concurrency:{' '}
+
+ setConcurrency(Math.max(1, parseInt(e.currentTarget.value) || 1))
+ }
+ style={{ width: '60px' }}
+ />
+
+
+ Queue Items:
+ {asyncQueuer.peekAllItems().map((item, index) => (
+
+
+ {index}: {item}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {JSON.stringify(asyncQueuer.store.state, null, 2)}
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+
+let mounted = true
+render(
+ // optionally, provide default options to an optional PacerProvider
+ TanStack Pacer useAsyncRateLimiter Example
+
+
+
+
+
+
+
+ {error && Error: {error.message}
}
+
+
+
+
+
+ | API calls made: | +{setSearchAsyncRateLimiter.state.successCount} | +
| Rejected calls: | +{setSearchAsyncRateLimiter.state.rejectionCount} | +
| Is executing: | ++ {setSearchAsyncRateLimiter.state.isExecuting ? 'Yes' : 'No'} + | +
| Results: | +
+ {results.length > 0 ? (
+
|
+
+ {JSON.stringify(setSearchAsyncRateLimiter.store.state, null, 2)}
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+
+let mounted = true
+render(TanStack Pacer useAsyncRateLimiter Example (with persister)
+
+
+
+
+
+
+
+ {error && Error: {error.message}
}
+
+
+
+
+
+ | API calls made: | +{setSearchAsyncRateLimiter.state.successCount} | +
| Rejected calls: | +{setSearchAsyncRateLimiter.state.rejectionCount} | +
| Is executing: | ++ {setSearchAsyncRateLimiter.state.isExecuting ? 'Yes' : 'No'} + | +
| Results: | +
+ {results.length > 0 ? (
+
|
+
+ {JSON.stringify(setSearchAsyncRateLimiter.store.state, null, 2)}
+
+
+
+ )
+}
+
+function App2() {
+ const [count, setCount] = useState(0)
+ const [apiCallCount, setApiCallCount] = useState(0)
+
+ // Simulate API call that returns a value
+ const incrementApi = async (value: number): PromiseTanStack Pacer useAsyncThrottledCallback Example 1
+
+
+
+
+ {isLoading && Searching...
} + {error &&Error: {error}
} + +
+
+ Current search term: {searchTerm}
+ {results.length > 0 && ( +
+
+ )}
+ Results:
+-
+ {results.map((result) => (
+
- {result.title} + ))} +
+
+
+
+
+ )
+}
+
+function App3() {
+ const [scrollPosition, setScrollPosition] = useState(0)
+ const [saveCount, setSaveCount] = useState(0)
+ const [lastSaved, setLastSaved] = useStateTanStack Pacer useAsyncThrottledCallback Example 2
+| Current Count: | +{count} | +
| API Calls Made: | +{apiCallCount} | +
+
+
+ + Click rapidly - API calls are throttled to 1 second, but UI updates + immediately. First click executes immediately, then at most once per + second. +
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useAsyncThrottledCallback Example 3
+
+
+
+
+
+ Scroll this area to trigger throttled saves!
+Current scroll position: {Math.round(scrollPosition)}px
+ {isSaving &&Saving position...
} +
+
+ Saves triggered: {saveCount}
+ {lastSaved && ( +Last saved at: {lastSaved.toLocaleTimeString()}
+ )} +
+
+ Keep scrolling...
+More content...
+Even more content...
+Almost there...
+You made it to the end!
++ Scroll position is saved at most once per second, but updates instantly + on screen +
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useAsyncThrottledCallback/tsconfig.json b/examples/preact/useAsyncThrottledCallback/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useAsyncThrottledCallback/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useAsyncThrottledCallback/vite.config.ts b/examples/preact/useAsyncThrottledCallback/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useAsyncThrottledCallback/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useAsyncThrottler/README.md b/examples/preact/useAsyncThrottler/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useAsyncThrottler/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useAsyncThrottler/index.html b/examples/preact/useAsyncThrottler/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useAsyncThrottler/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+
+// optionally, provide default options to an optional PacerProvider
+render(
+ TanStack Pacer useAsyncThrottler Example
+
+
+
+
+
+
+ {error && Error: {error.message}
}
+
+
+ API calls made: {setSearchAsyncThrottler.state.successCount}
+ {results.length > 0 && ( +-
+ {results.map((item) => (
+
- {item.title} + ))} +
Pending...
+ ) : setSearchAsyncThrottler.state.isExecuting ? ( +Executing...
+ ) : null} +
+ {JSON.stringify(setSearchAsyncThrottler.store.state, null, 2)}
+
+
+
+
+
+
+
+ )
+}
+
+interface AnalyticsEvent {
+ type: string
+ target: string
+ timestamp: Date
+}
+
+function App2() {
+ const [events, setEvents] = useStateTanStack Pacer useBatchedCallback Example 1
+
+
+
+
+
+
+ | Total Logs Created: | +{logCount} | +
| Logs Processed: | +{logs.length} | +
+
+
+ Processed Logs:
+
+ {logs.length === 0 ? (
+
+ No logs processed yet...
+ ) : ( + logs.map((log) => ( +
+ {log.timestamp.toLocaleTimeString()}:{' '}
+ {log.message}
+
+ ))
+ )}
+ + Logs are batched - max 3 items or 2 second wait time +
+
+
+
+
+
+
+ )
+}
+
+interface ApiRequest {
+ id: string
+ data: any
+}
+
+function App3() {
+ const [requests, setRequests] = useStateTanStack Pacer useBatchedCallback Example 2
+
+
+
+
+
+
+
+ | Total Events Created: | +{totalEvents} | +
| Events Sent: | +{events.length} | +
| Batches Processed: | +{batchesProcessed} | +
+
+
+ Sent Analytics Events:
+
+ {events.length === 0 ? (
+
+ No events sent yet...
+ ) : ( + events.map((event, index) => ( +
+ {event.timestamp.toLocaleTimeString()}:{' '}
+ {event.type} - {event.target}
+
+ ))
+ )}
+ + Analytics events are batched - max 5 events or 3 second wait time +
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useBatchedCallback Example 3
+
+
+
+
+
+
+
+ | Total Requests Made: | +{totalRequests} | +
| Requests Queued: | +{requests.length - processedRequests.length} | +
| Requests Processed: | +{processedRequests.length} | +
+
+
+
+
+
+ Queued Requests:
+
+ {requests.filter(
+ (req) => !processedRequests.some((p) => p.id === req.id),
+ ).length === 0 ? (
+
+ No requests queued...
+ ) : ( + requests + .filter( + (req) => !processedRequests.some((p) => p.id === req.id), + ) + .map((request) => ( +
+ {request.id}: {JSON.stringify(request.data)}
+
+ ))
+ )}
+
+
+ Processed Requests:
+
+ {processedRequests.length === 0 ? (
+
+ No requests processed yet...
+ ) : ( + processedRequests.map((request) => ( +
+ {request.id}: {JSON.stringify(request.data)}
+
+ ))
+ )}
+ + API requests are batched - max 4 requests or 1.5 second wait time +
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useBatchedCallback/tsconfig.json b/examples/preact/useBatchedCallback/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useBatchedCallback/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useBatchedCallback/vite.config.ts b/examples/preact/useBatchedCallback/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useBatchedCallback/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useBatcher/README.md b/examples/preact/useBatcher/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useBatcher/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useBatcher/index.html b/examples/preact/useBatcher/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useBatcher/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ // optionally, provide default options to an optional PacerProvider
+ TanStack Pacer useBatcher Example 1
+Batch Size: {batcher.state.size}
+ Batch Max Size: {3}
+ Batch Items: {batcher.peekAllItems().join(', ')}
+ Batches Processed: {batcher.state.executionCount}
+ Items Processed: {batcher.state.totalItemsProcessed}
+
+ Processed Batches:{' '}
+ {processedBatches.map((b, i) => (
+ <>
+ [{b.join(', ')}],{' '}
+
+ ))}
+
+
+
+
+
+
+ {JSON.stringify(batcher.store.state, null, 2)}
+
+
+
+
+ +
+
+
+
+
+ )
+}
+
+function App2() {
+ const [searchText, setSearchText] = useState('')
+ const [debouncedSearchText, setDebouncedSearchText] = useState('')
+
+ // Create debounced setter function - Stable reference provided by useDebouncedCallback
+ const debouncedSetSearch = useDebouncedCallback(setDebouncedSearchText, {
+ wait: 500,
+ enabled: () => searchText.length > 2,
+ })
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useDebouncedCallback Example 1
+| Instant Count: | +{instantCount} | +
| Debounced Count: | +{debouncedCount} | +
+
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [debouncedValue, setDebouncedValue] = useState(50)
+
+ // Create debounced setter function - Stable reference provided by useDebouncedCallback
+ const debouncedSetValue = useDebouncedCallback(setDebouncedValue, {
+ wait: 250,
+ })
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useDebouncedCallback Example 2
+
+
+
+ | Instant Search: | +{searchText} | +
| Debounced Search: | +{debouncedSearchText} | +
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useDebouncedCallback Example 3
+
+
+
+
+
+
+
+
+ Debounced to 250ms wait time
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useDebouncedCallback/tsconfig.json b/examples/preact/useDebouncedCallback/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useDebouncedCallback/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useDebouncedCallback/vite.config.ts b/examples/preact/useDebouncedCallback/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useDebouncedCallback/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useDebouncedState/README.md b/examples/preact/useDebouncedState/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useDebouncedState/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useDebouncedState/index.html b/examples/preact/useDebouncedState/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useDebouncedState/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [instantSearch, setInstantSearch] = useState('')
+
+ // higher-level hook that uses Preact.useState with the state setter automatically debounced
+ const [debouncedSearch, setDebouncedSearch, debouncer] = useDebouncedState(
+ instantSearch,
+ {
+ wait: 500,
+ enabled: instantSearch.length > 2, // optional, defaults to true
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ isPending: state.isPending,
+ executionCount: state.executionCount,
+ }),
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useDebouncedState Example 1
+| Is Pending: | +{debouncer.state.isPending.toString()} | +
| Execution Count: | +{debouncer.state.executionCount} | +
|
+ + |
+ |
| Instant Count: | +{instantCount} | +
| Debounced Count: | +{debouncedCount} | +
+
+
+
+ {JSON.stringify(debouncer.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ // higher-level hook that uses Preact.useState with the state setter automatically debounced
+ const [debouncedValue, setDebouncedValue, debouncer] = useDebouncedState(
+ currentValue,
+ {
+ wait: 250,
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ isPending: state.isPending,
+ executionCount: state.executionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useDebouncedState Example 2
+
+
+
+ | Is Pending: | +{debouncer.state.isPending.toString()} | +
| Execution Count: | +{debouncer.state.executionCount} | +
|
+ + |
+ |
| Instant Search: | +{instantSearch} | +
| Debounced Search: | +{debouncedSearch} | +
+ {JSON.stringify(debouncer.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useDebouncedState Example 3
+
+
+
+
+
+
+ | Is Pending: | +{debouncer.state.isPending.toString()} | +
| Instant Executions: | +{instantExecutionCount} | +
| Debounced Executions: | +{debouncer.state.executionCount} | +
| Saved Executions: | +{instantExecutionCount - debouncer.state.executionCount} | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - debouncer.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Debounced to 250ms wait time
+
+ {JSON.stringify(debouncer.store.state, null, 2)}
+
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useDebouncedState/tsconfig.json b/examples/preact/useDebouncedState/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useDebouncedState/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useDebouncedState/vite.config.ts b/examples/preact/useDebouncedState/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useDebouncedState/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useDebouncedValue/README.md b/examples/preact/useDebouncedValue/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useDebouncedValue/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useDebouncedValue/index.html b/examples/preact/useDebouncedValue/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useDebouncedValue/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [instantSearch, setInstantSearch] = useState('')
+
+ // highest-level hook that watches an instant local state value and returns a debounced value
+ // optionally, grab the debouncer from the last index of the returned array
+ const [debouncedSearch] = useDebouncedValue(
+ instantSearch,
+ {
+ wait: 500,
+ enabled: instantSearch.length > 2, // optional, defaults to true
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (_state) => ({}), // No specific state access needed for this example
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useDebouncedValue Example 1
+| Instant Count: | +{instantCount} | +
| Debounced Count: | +{debouncedCount} | +
+
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ // highest-level hook that watches an instant local state value and returns a debounced value
+ const [debouncedValue, debouncer] = useDebouncedValue(
+ currentValue,
+ {
+ wait: 250,
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ isPending: state.isPending,
+ executionCount: state.executionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useDebouncedValue Example 2
+
+
+
+ | Instant Search: | +{instantSearch} | +
| Debounced Search: | +{debouncedSearch} | +
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useDebouncedValue Example 3
+
+
+
+
+
+
+ | Is Pending: | +{debouncer.state.isPending.toString()} | +
| Instant Executions: | +{instantExecutionCount} | +
| Debounced Executions: | +{debouncer.state.executionCount} | +
| Saved Executions: | +{instantExecutionCount - debouncer.state.executionCount} | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - debouncer.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Debounced to 250ms wait time
+
+ {JSON.stringify(debouncer.store.state, null, 2)}
+
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useDebouncedValue/tsconfig.json b/examples/preact/useDebouncedValue/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useDebouncedValue/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useDebouncedValue/vite.config.ts b/examples/preact/useDebouncedValue/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useDebouncedValue/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useDebouncer/README.md b/examples/preact/useDebouncer/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useDebouncer/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useDebouncer/index.html b/examples/preact/useDebouncer/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useDebouncer/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [searchText, setSearchText] = useState('')
+ const [debouncedSearchText, setDebouncedSearchText] = useState('')
+
+ // Lower-level useDebouncer hook - requires you to manage your own state
+ const setSearchDebouncer = useDebouncer(
+ setDebouncedSearchText,
+ {
+ wait: 500,
+ enabled: () => searchText.length > 2, // optional, defaults to true
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ isPending: state.isPending,
+ executionCount: state.executionCount,
+ }),
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useDebouncer Example 1
+| Status: | +{debouncer.state.status} | +
| Execution Count: | +{debouncer.state.executionCount} | +
|
+ + |
+ |
| Instant Count: | +{instantCount} | +
| Debounced Count: | +{debouncedCount} | +
+
+
+
+
+ {JSON.stringify(debouncer.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [debouncedValue, setDebouncedValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ // Lower-level useDebouncer hook - requires you to manage your own state
+ const setValueDebouncer = useDebouncer(
+ setDebouncedValue,
+ {
+ wait: 250,
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ isPending: state.isPending,
+ executionCount: state.executionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useDebouncer Example 2
+
+
+
+ | Is Pending: | +{setSearchDebouncer.state.isPending.toString()} | +
| Execution Count: | +{setSearchDebouncer.state.executionCount} | +
|
+ + |
+ |
| Instant Search: | +{searchText} | +
| Debounced Search: | +{debouncedSearchText} | +
+
+
+
+ {JSON.stringify(setSearchDebouncer.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ // optionally, provide default options to an optional PacerProvider
+ TanStack Pacer useDebouncer Example 3
+
+
+
+
+
+
+ | Is Pending: | +{setValueDebouncer.state.isPending.toString()} | +
| Instant Executions: | +{instantExecutionCount} | +
| Debounced Executions: | +{setValueDebouncer.state.executionCount} | +
| Saved Executions: | ++ {instantExecutionCount - setValueDebouncer.state.executionCount} + | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - + setValueDebouncer.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Debounced to 250ms wait time
+
+
+
+
+ {JSON.stringify(setValueDebouncer.store.state, null, 2)}
+
+
+
+
+
+ +
+
+
+ )
+}
+
+function App2() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [queuedValue, setQueuedValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ // Queuer that processes a single value with delays
+ const [, addItem, queuer] = useQueuedState(
+ (item: number) => {
+ setQueuedValue(item)
+ },
+ {
+ maxSize: 100,
+ started: true,
+ wait: 100,
+ },
+ (state) => ({
+ items: state.items, // required for useQueuedState
+ size: state.size,
+ isFull: state.isFull,
+ isEmpty: state.isEmpty,
+ isIdle: state.isIdle,
+ status: state.status,
+ executionCount: state.executionCount,
+ isRunning: state.isRunning,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useQueuedState Example 1
+Queue Size: {queuer.state.size}
+ Queue Max Size: {25}
+ Queue Full: {queuer.state.isFull ? 'Yes' : 'No'}
+ Queue Peek: {queuer.peekNextItem()}
+ Queue Empty: {queuer.state.isEmpty ? 'Yes' : 'No'}
+ Queue Idle: {queuer.state.isIdle ? 'Yes' : 'No'}
+ Queuer Status: {queuer.state.status}
+ Items Processed: {queuer.state.executionCount}
+ Queue Items: {queueItems.join(', ')}
+
+
+
+
+
+
+
+
+
+ {JSON.stringify(queuer.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useQueuedState Example 2
+
+
+
+
+
+
+ | Queue Size: | +{queuer.state.size} | +
| Queue Full: | +{queuer.state.isFull ? 'Yes' : 'No'} | +
| Queue Empty: | +{queuer.state.isEmpty ? 'Yes' : 'No'} | +
| Queue Idle: | +{queuer.state.isIdle ? 'Yes' : 'No'} | +
| Queuer Status: | +{queuer.state.status} | +
| Instant Executions: | +{instantExecutionCount} | +
| Items Processed: | +{queuer.state.executionCount} | +
| Saved Executions: | +{instantExecutionCount - queuer.state.executionCount} | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - queuer.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Queued with 100ms wait time
+
+ {JSON.stringify(queuer.store.state, null, 2)}
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useQueuedState/tsconfig.json b/examples/preact/useQueuedState/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useQueuedState/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useQueuedState/vite.config.ts b/examples/preact/useQueuedState/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useQueuedState/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useQueuedValue/README.md b/examples/preact/useQueuedValue/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useQueuedValue/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useQueuedValue/index.html b/examples/preact/useQueuedValue/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useQueuedValue/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+ )
+}
+
+function App2() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ // Queuer that processes a single value with delays
+ const [queuedValue, queuer] = useQueuedValue(
+ currentValue,
+ {
+ maxSize: 100,
+ wait: 100,
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ isEmpty: state.isEmpty,
+ isFull: state.isFull,
+ isIdle: state.isIdle,
+ items: state.items, // required for useQueuedValue hook
+ size: state.size,
+ status: state.status,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useQueuedValue Example 1
+Current Value: {value}
+ +
Queue Size: {queuer.state.size}
+ Queue Full: {queuer.state.isFull ? 'Yes' : 'No'}
+ Queue Peek: {queuer.peekNextItem()}
+ Queue Empty: {queuer.state.isEmpty ? 'Yes' : 'No'}
+ Queue Idle: {queuer.state.isIdle ? 'Yes' : 'No'}
+ Queuer Status: {queuer.state.status}
+ Items Processed: {queuer.state.executionCount}
+ Queue Items: {queuer.peekAllItems().join(', ')}
+
+ {
+ setInstantSearchValue(e.currentTarget.value) // instantly update the local search value
+ }}
+ placeholder="Enter search term..."
+ disabled={queuer.state.isFull}
+ />
+
+
+
+
+
+
+
+ {JSON.stringify(queuer.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useQueuedValue Example 2
+
+
+
+
+
+
+ | Queue Size: | +{queuer.state.size} | +
| Queue Full: | +{queuer.state.isFull ? 'Yes' : 'No'} | +
| Queue Empty: | +{queuer.state.isEmpty ? 'Yes' : 'No'} | +
| Queue Idle: | +{queuer.state.isIdle ? 'Yes' : 'No'} | +
| Queuer Status: | +{queuer.state.status} | +
| Instant Executions: | +{instantExecutionCount} | +
| Items Processed: | +{queuer.state.executionCount} | +
| Saved Executions: | +{instantExecutionCount - queuer.state.executionCount} | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - queuer.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Queued with 100ms wait time
+
+ {JSON.stringify(queuer.store.state, null, 2)}
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useQueuedValue/tsconfig.json b/examples/preact/useQueuedValue/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useQueuedValue/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useQueuedValue/vite.config.ts b/examples/preact/useQueuedValue/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useQueuedValue/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useQueuer/README.md b/examples/preact/useQueuer/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useQueuer/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useQueuer/index.html b/examples/preact/useQueuer/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useQueuer/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+ )
+}
+
+function App2() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [queuedValue, setQueuedValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ function processItem(item: number) {
+ setQueuedValue(item)
+ }
+
+ const queuer = useQueuer(
+ processItem,
+ {
+ key: 'Range Queue',
+ maxSize: 100,
+ initialItems: [currentValue],
+ wait: 100,
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ size: state.size,
+ isFull: state.isFull,
+ isEmpty: state.isEmpty,
+ isIdle: state.isIdle,
+ isRunning: state.isRunning,
+ executionCount: state.executionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useQueuer Example 1
+Queue Size: {queuer.state.size}
+ Queue Max Size: {25}
+ Queue Full: {queuer.state.isFull ? 'Yes' : 'No'}
+ Queue Peek: {queuer.peekNextItem()}
+ Queue Empty: {queuer.state.isEmpty ? 'Yes' : 'No'}
+ Queue Idle: {queuer.state.isIdle ? 'Yes' : 'No'}
+ Queuer Status: {queuer.state.status}
+ Items Processed: {queuer.state.executionCount}
+ Queue Items: {queuer.state.items.join(', ')}
+
+
+
+
+
+
+
+
+
+
+ {JSON.stringify(queuer.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ // optionally, provide default options to an optional PacerProvider
+ TanStack Pacer useQueuer Example 2
+
+
+
+
+
+
+ | Queue Size: | +{queuer.state.size} | +
| Queue Full: | +{queuer.state.isFull ? 'Yes' : 'No'} | +
| Queue Empty: | +{queuer.state.isEmpty ? 'Yes' : 'No'} | +
| Queue Idle: | +{queuer.state.isIdle ? 'Yes' : 'No'} | +
| Queuer Status: | +{queuer.state.isRunning ? 'Running' : 'Stopped'} | +
| Instant Executions: | +{instantExecutionCount} | +
| Items Processed: | +{queuer.state.executionCount} | +
| Saved Executions: | +{instantExecutionCount - queuer.state.executionCount} | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - queuer.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Queued with 100ms wait time
+
+
+
+
+ {JSON.stringify(queuer.store.state, null, 2)}
+
+
+
+
+ +
+
+ )
+}
+
+function App2() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [queuedValue, setQueuedValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ function processItem(item: number) {
+ setQueuedValue(item)
+ }
+
+ const queuer = useQueuer(
+ processItem,
+ {
+ maxSize: 100,
+ initialItems: [currentValue],
+ wait: 100,
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ size: state.size,
+ isFull: state.isFull,
+ isEmpty: state.isEmpty,
+ isIdle: state.isIdle,
+ isRunning: state.isRunning,
+ executionCount: state.executionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useQueuer Example 1 (with persister)
+Queue Size: {queuer.state.size}
+ Queue Max Size: {25}
+ Queue Full: {queuer.state.isFull ? 'Yes' : 'No'}
+ Queue Peek: {queuer.peekNextItem()}
+ Queue Empty: {queuer.state.isEmpty ? 'Yes' : 'No'}
+ Queue Idle: {queuer.state.isIdle ? 'Yes' : 'No'}
+ Queuer Status: {queuer.state.status}
+ Items Processed: {queuer.state.executionCount}
+ Queue Items: {queuer.state.items.join(', ')}
+
+
+
+
+
+
+
+
+
+
+ {JSON.stringify(queuer.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useQueuer Example 2
+
+
+
+
+
+
+ | Queue Size: | +{queuer.state.size} | +
| Queue Full: | +{queuer.state.isFull ? 'Yes' : 'No'} | +
| Queue Empty: | +{queuer.state.isEmpty ? 'Yes' : 'No'} | +
| Queue Idle: | +{queuer.state.isIdle ? 'Yes' : 'No'} | +
| Queuer Status: | +{queuer.state.isRunning ? 'Running' : 'Stopped'} | +
| Instant Executions: | +{instantExecutionCount} | +
| Items Processed: | +{queuer.state.executionCount} | +
| Saved Executions: | +{instantExecutionCount - queuer.state.executionCount} | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - queuer.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Queued with 100ms wait time
+
+
+
+
+ {JSON.stringify(queuer.store.state, null, 2)}
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useQueuerWithPersister/tsconfig.json b/examples/preact/useQueuerWithPersister/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useQueuerWithPersister/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useQueuerWithPersister/vite.config.ts b/examples/preact/useQueuerWithPersister/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useQueuerWithPersister/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useRateLimitedCallback/README.md b/examples/preact/useRateLimitedCallback/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useRateLimitedCallback/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useRateLimitedCallback/index.html b/examples/preact/useRateLimitedCallback/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useRateLimitedCallback/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+ )
+}
+
+function App2() {
+ const [windowType, setWindowType] = useState<'fixed' | 'sliding'>('fixed')
+ const [searchText, setSearchText] = useState('')
+ const [rateLimitedSearchText, setRateLimitedSearchText] = useState('')
+
+ // Create rateLimited setter function - Stable reference provided by useRateLimitedCallback
+ const rateLimitedSetSearch = useRateLimitedCallback(
+ setRateLimitedSearchText,
+ {
+ limit: 5,
+ window: 5000,
+ windowType: windowType,
+ enabled: () => searchText.length > 2,
+ onReject: (rateLimiter) => {
+ console.log(
+ `Rate limit reached. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`,
+ )
+ },
+ },
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useRateLimitedCallback Example 1
+
+
+
+
+ | Instant Count: | +{instantCount} | +
| RateLimited Count: | +{rateLimitedCount} | +
+
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [windowType, setWindowType] = useState<'fixed' | 'sliding'>('fixed')
+ const [currentValue, setCurrentValue] = useState(50)
+ const [limitedValue, setLimitedValue] = useState(50)
+
+ // Create rateLimited setter function - Stable reference provided by useRateLimitedCallback
+ const rateLimitedSetValue = useRateLimitedCallback(setLimitedValue, {
+ limit: 20,
+ window: 2000,
+ windowType: windowType,
+ onReject: (rateLimiter) => {
+ console.log(
+ `Rate limit reached. Try again in ${rateLimiter.getMsUntilNextWindow()}ms`,
+ )
+ },
+ })
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useRateLimitedCallback Example 2
+
+
+
+
+
+
+
+ | Instant Search: | +{searchText} | +
| RateLimited Search: | +{rateLimitedSearchText} | +
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useRateLimitedCallback Example 3
+
+
+
+
+
+
+
+
+
+
+
+
+ Rate limited to 20 updates per 2 seconds
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useRateLimitedCallback/tsconfig.json b/examples/preact/useRateLimitedCallback/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useRateLimitedCallback/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useRateLimitedCallback/vite.config.ts b/examples/preact/useRateLimitedCallback/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useRateLimitedCallback/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useRateLimitedState/README.md b/examples/preact/useRateLimitedState/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useRateLimitedState/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useRateLimitedState/index.html b/examples/preact/useRateLimitedState/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useRateLimitedState/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [windowType, setWindowType] = useState<'fixed' | 'sliding'>('fixed')
+ const [instantSearch, setInstantSearch] = useState('')
+
+ // Using useRateLimiter with a rate limit of 5 executions per 5 seconds
+ const [limitedSearch, setLimitedSearch, rateLimiter] = useRateLimitedState(
+ instantSearch,
+ {
+ // enabled: instantSearch.length > 2, // optional, defaults to true
+ limit: 5,
+ window: 5000,
+ windowType: windowType,
+ onReject: (rateLimiter) =>
+ console.log(
+ 'Rejected by rate limiter',
+ rateLimiter.getMsUntilNextWindow(),
+ ),
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ rejectionCount: state.rejectionCount,
+ }),
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useRateLimitedState Example 1
+
+
+
+
+ | Execution Count: | +{rateLimiter.state.executionCount} | +
| Rejection Count: | +{rateLimiter.state.rejectionCount} | +
| Instant Count: | +{instantCount} | +
| Rate Limited Count: | +{limitedCount} | +
+
+
+
+
+
+ {JSON.stringify(rateLimiter.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [windowType, setWindowType] = useState<'fixed' | 'sliding'>('fixed')
+ const [currentValue, setCurrentValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ // Using useRateLimitedState with a rate limit of 5 executions per 5 seconds
+ const [limitedValue, setLimitedValue, rateLimiter] = useRateLimitedState(
+ currentValue,
+ {
+ limit: 20,
+ window: 2000,
+ windowType: windowType,
+ onReject: (rateLimiter) =>
+ console.log(
+ 'Rejected by rate limiter',
+ rateLimiter.getMsUntilNextWindow(),
+ ),
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ rejectionCount: state.rejectionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useRateLimitedState Example 2
+
+
+
+
+
+
+
+ | Execution Count: | +{rateLimiter.state.executionCount} | +
| Rejection Count: | +{rateLimiter.state.rejectionCount} | +
| Instant Search: | +{instantSearch} | +
| Rate Limited Search: | +{limitedSearch} | +
+
+
+
+
+ {JSON.stringify(rateLimiter.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useRateLimitedState Example 3
+
+
+
+
+
+
+
+
+
+
+ | Execution Count: | +{rateLimiter.state.executionCount} | +
| Rejection Count: | +{rateLimiter.state.rejectionCount} | +
| Remaining in Window: | +{rateLimiter.getRemainingInWindow()} | +
| Ms Until Next Window: | +{rateLimiter.getMsUntilNextWindow()} | +
| Instant Executions: | +{instantExecutionCount} | +
| Saved Executions: | +{instantExecutionCount - rateLimiter.state.executionCount} | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - + rateLimiter.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Rate limited to 20 updates per 2 seconds
+
+ {JSON.stringify(rateLimiter.store.state, null, 2)}
+
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useRateLimitedState/tsconfig.json b/examples/preact/useRateLimitedState/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useRateLimitedState/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useRateLimitedState/vite.config.ts b/examples/preact/useRateLimitedState/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useRateLimitedState/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useRateLimitedValue/README.md b/examples/preact/useRateLimitedValue/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useRateLimitedValue/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useRateLimitedValue/index.html b/examples/preact/useRateLimitedValue/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useRateLimitedValue/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [windowType, setWindowType] = useState<'fixed' | 'sliding'>('fixed')
+ const [instantSearch, setInstantSearch] = useState('')
+
+ // Using useRateLimitedValue with a rate limit of 5 executions per 5 seconds
+ const [limitedSearch] = useRateLimitedValue(
+ instantSearch,
+ {
+ // enabled: instantSearch.length > 2, // optional, defaults to true
+ limit: 5,
+ window: 5000,
+ windowType: windowType,
+ onReject: (rateLimiter) =>
+ console.log(
+ 'Rejected by rate limiter',
+ rateLimiter.getMsUntilNextWindow(),
+ ),
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (_state) => ({}), // No specific state access needed for this example
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useRateLimitedValue Example 1
+
+
+
+
+ | Instant Count: | +{instantCount} | +
| Rate Limited Count: | +{limitedCount} | +
+
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [windowType, setWindowType] = useState<'fixed' | 'sliding'>('fixed')
+ const [currentValue, setCurrentValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ // Using useRateLimitedValue with a rate limit of 5 executions per 5 seconds
+ const [limitedValue, rateLimiter] = useRateLimitedValue(
+ currentValue,
+ {
+ limit: 20,
+ window: 2000,
+ windowType: windowType,
+ onReject: (rateLimiter) =>
+ console.log(
+ 'Rejected by rate limiter',
+ rateLimiter.getMsUntilNextWindow(),
+ ),
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ rejectionCount: state.rejectionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useRateLimitedValue Example 2
+
+
+
+
+
+
+
+ | Instant Search: | +{instantSearch} | +
| Rate Limited Search: | +{limitedSearch} | +
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useRateLimitedValue Example 3
+
+
+
+
+
+
+
+
+
+
+ | Execution Count: | +{rateLimiter.state.executionCount} | +
| Rejection Count: | +{rateLimiter.state.rejectionCount} | +
| Remaining in Window: | +{rateLimiter.getRemainingInWindow()} | +
| Ms Until Next Window: | +{rateLimiter.getMsUntilNextWindow()} | +
| Instant Executions: | +{instantExecutionCount} | +
| Saved Executions: | +{instantExecutionCount - rateLimiter.state.executionCount} | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - + rateLimiter.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Rate limited to 20 updates per 2 seconds
+
+ {JSON.stringify(rateLimiter.store.state, null, 2)}
+
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useRateLimitedValue/tsconfig.json b/examples/preact/useRateLimitedValue/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useRateLimitedValue/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useRateLimitedValue/vite.config.ts b/examples/preact/useRateLimitedValue/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useRateLimitedValue/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useRateLimiter/README.md b/examples/preact/useRateLimiter/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useRateLimiter/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useRateLimiter/index.html b/examples/preact/useRateLimiter/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useRateLimiter/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [instantSearch, setInstantSearch] = useState('')
+ const [limitedSearch, setLimitedSearch] = useState('')
+
+ // Using useRateLimiter with a rate limit of 5 executions per 5 seconds
+ const rateLimiter = useRateLimiter(
+ setLimitedSearch,
+ {
+ enabled: instantSearch.length > 2, // optional, defaults to true
+ ...commonRateLimiterOptions,
+ // windowType: 'sliding', // default is 'fixed'
+ onReject: (rateLimiter) =>
+ console.log(
+ 'Rejected by rate limiter',
+ rateLimiter.getMsUntilNextWindow(),
+ ),
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ rejectionCount: state.rejectionCount,
+ }),
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useRateLimiter Example 1
+
+
+
+
+ | Execution Count: | +{rateLimiter.state.executionCount} | +
| Rejection Count: | +{rateLimiter.state.rejectionCount} | +
| Remaining in Window: | +{rateLimiter.getRemainingInWindow()} | +
| Ms Until Next Window: | +{rateLimiter.getMsUntilNextWindow()} | +
|
+ + |
+ |
| Instant Count: | +{instantCount} | +
| Rate Limited Count: | +{limitedCount} | +
+
+
+
+
+ {JSON.stringify(rateLimiter.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [limitedValue, setLimitedValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ // Using useRateLimiter with a rate limit of 5 executions per 5 seconds
+ const rateLimiter = useRateLimiter(
+ setLimitedValue,
+ {
+ limit: 20,
+ window: 2000,
+ onReject: (rateLimiter) =>
+ console.log(
+ 'Rejected by rate limiter',
+ rateLimiter.getMsUntilNextWindow(),
+ ),
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ rejectionCount: state.rejectionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useRateLimiter Example 2
+
+
+
+ | Execution Count: | +{rateLimiter.state.executionCount} | +
| Rejection Count: | +{rateLimiter.state.rejectionCount} | +
| Remaining in Window: | +{rateLimiter.getRemainingInWindow()} | +
| Ms Until Next Window: | +{rateLimiter.getMsUntilNextWindow()} | +
|
+ + |
+ |
| Instant Search: | +|
| Rate Limited Search: | +{limitedSearch} | +
+
+
+
+ {JSON.stringify(rateLimiter.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ // optionally, provide default options to an optional PacerProvider
+ TanStack Pacer useRateLimiter Example 3
+
+
+
+
+
+
+ | Execution Count: | +{rateLimiter.state.executionCount} | +
| Rejection Count: | +{rateLimiter.state.rejectionCount} | +
| Remaining in Window: | +{rateLimiter.getRemainingInWindow()} | +
| Ms Until Next Window: | +{rateLimiter.getMsUntilNextWindow()} | +
| Instant Executions: | +{instantExecutionCount} | +
| Saved Executions: | +{instantExecutionCount - rateLimiter.state.executionCount} | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - + rateLimiter.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Rate limited to 20 updates per 2 seconds
+
+ {JSON.stringify(rateLimiter.store.state, null, 2)}
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [instantSearch, setInstantSearch] = useState('')
+ const [limitedSearch, setLimitedSearch] = useState('')
+
+ // Using useRateLimiter with a rate limit of 5 executions per 5 seconds
+ const rateLimiter = useRateLimiter(
+ setLimitedSearch,
+ {
+ enabled: instantSearch.length > 2, // optional, defaults to true
+ limit: 5,
+ window: 5000,
+ // windowType: 'sliding', // default is 'fixed'
+ onReject: (rateLimiter) =>
+ console.log(
+ 'Rejected by rate limiter',
+ rateLimiter.getMsUntilNextWindow(),
+ ),
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ rejectionCount: state.rejectionCount,
+ }),
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useRateLimiter Example 1 (with persister)
+
+
+
+
+ | Execution Count: | +{rateLimiter.state.executionCount} | +
| Rejection Count: | +{rateLimiter.state.rejectionCount} | +
| Remaining in Window: | +{rateLimiter.getRemainingInWindow()} | +
| Ms Until Next Window: | +{rateLimiter.getMsUntilNextWindow()} | +
|
+ + |
+ |
| Instant Count: | +{instantCount} | +
| Rate Limited Count: | +{limitedCount} | +
+
+
+
+
+ {JSON.stringify(rateLimiter.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [limitedValue, setLimitedValue] = useState(50)
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+
+ // Using useRateLimiter with a rate limit of 5 executions per 5 seconds
+ const rateLimiter = useRateLimiter(
+ setLimitedValue,
+ {
+ limit: 20,
+ window: 2000,
+ onReject: (rateLimiter) =>
+ console.log(
+ 'Rejected by rate limiter',
+ rateLimiter.getMsUntilNextWindow(),
+ ),
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ rejectionCount: state.rejectionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useRateLimiter Example 2
+
+
+
+ | Execution Count: | +{rateLimiter.state.executionCount} | +
| Rejection Count: | +{rateLimiter.state.rejectionCount} | +
| Remaining in Window: | +{rateLimiter.getRemainingInWindow()} | +
| Ms Until Next Window: | +{rateLimiter.getMsUntilNextWindow()} | +
|
+ + |
+ |
| Instant Search: | +|
| Rate Limited Search: | +{limitedSearch} | +
+
+
+
+ {JSON.stringify(rateLimiter.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useRateLimiter Example 3
+
+
+
+
+
+
+ | Execution Count: | +{rateLimiter.state.executionCount} | +
| Rejection Count: | +{rateLimiter.state.rejectionCount} | +
| Remaining in Window: | +{rateLimiter.getRemainingInWindow()} | +
| Ms Until Next Window: | +{rateLimiter.getMsUntilNextWindow()} | +
| Instant Executions: | +{instantExecutionCount} | +
| Saved Executions: | +{instantExecutionCount - rateLimiter.state.executionCount} | +
| % Reduction: | ++ {instantExecutionCount === 0 + ? '0' + : Math.round( + ((instantExecutionCount - + rateLimiter.state.executionCount) / + instantExecutionCount) * + 100, + )} + % + | +
+
+ Rate limited to 20 updates per 2 seconds
+
+ {JSON.stringify(rateLimiter.store.state, null, 2)}
+
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useRateLimiterWithPersister/tsconfig.json b/examples/preact/useRateLimiterWithPersister/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useRateLimiterWithPersister/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useRateLimiterWithPersister/vite.config.ts b/examples/preact/useRateLimiterWithPersister/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useRateLimiterWithPersister/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useThrottledCallback/README.md b/examples/preact/useThrottledCallback/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useThrottledCallback/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useThrottledCallback/index.html b/examples/preact/useThrottledCallback/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useThrottledCallback/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [searchText, setSearchText] = useState('')
+ const [throttledSearchText, setThrottledSearchText] = useState('')
+
+ // Create throttled setter function - Stable reference provided by useThrottledCallback
+ const throttledSetSearch = useThrottledCallback(setThrottledSearchText, {
+ wait: 1000,
+ enabled: () => searchText.length > 2,
+ })
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useThrottledCallback Example 1
+| Instant Count: | +{instantCount} | +
| Throttled Count: | +{throttledCount} | +
+
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [currentValue, setCurrentValue] = useState(50)
+ const [throttledValue, setThrottledValue] = useState(50)
+
+ // Create throttled setter function - Stable reference provided by useThrottledCallback
+ const throttledSetValue = useThrottledCallback(setThrottledValue, {
+ wait: 250,
+ })
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useThrottledCallback Example 2
+
+
+
+ | Instant Search: | +{searchText} | +
| Throttled Search: | +{throttledSearchText} | +
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useThrottledCallback Example 3
+
+
+
+
+
+
+
+
+ Throttled to 1 update per 250ms
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useThrottledCallback/tsconfig.json b/examples/preact/useThrottledCallback/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useThrottledCallback/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useThrottledCallback/vite.config.ts b/examples/preact/useThrottledCallback/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useThrottledCallback/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useThrottledState/README.md b/examples/preact/useThrottledState/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useThrottledState/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useThrottledState/index.html b/examples/preact/useThrottledState/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useThrottledState/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [instantSearch, setInstantSearch] = useState('')
+
+ // higher-level hook that uses Preact.useState with the state setter automatically throttled
+ const [throttledSearch, setThrottledSearch, throttler] = useThrottledState(
+ instantSearch,
+ {
+ wait: 1000,
+ // enabled: instantSearch.length > 2, // optional, defaults to true
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ }),
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useThrottledState Example 1
+| Execution Count: | +{throttler.state.executionCount} | +
| Instant Count: | +{instantCount} | +
| Throttled Count: | +{throttledCount} | +
+
+
+
+ {JSON.stringify(throttler.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+ const [currentValue, setCurrentValue] = useState(50)
+
+ // higher-level hook that uses Preact.useState with the state setter automatically throttled
+ const [throttledValue, setThrottledValue, throttler] = useThrottledState(
+ currentValue,
+ {
+ wait: 250,
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useThrottledState Example 2
+
+
+
+ | Execution Count: | +{throttler.state.executionCount} | +
| Instant Search: | +{instantSearch} | +
| Throttled Search: | +{throttledSearch} | +
+ {JSON.stringify(throttler.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useThrottledState Example 3
+
+
+
+
+
+
+ | Instant Execution Count: | +{instantExecutionCount} | +
| Throttled Execution Count: | +{throttler.state.executionCount} | +
| Saved Executions: | ++ {instantExecutionCount - throttler.state.executionCount} ( + {instantExecutionCount > 0 + ? ( + ((instantExecutionCount - throttler.state.executionCount) / + instantExecutionCount) * + 100 + ).toFixed(2) + : 0} + % Reduction in execution calls) + | +
+
+ Throttled to 1 update per 250ms
+
+ {JSON.stringify(throttler.store.state, null, 2)}
+
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useThrottledState/tsconfig.json b/examples/preact/useThrottledState/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useThrottledState/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useThrottledState/vite.config.ts b/examples/preact/useThrottledState/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useThrottledState/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useThrottledValue/README.md b/examples/preact/useThrottledValue/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useThrottledValue/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useThrottledValue/index.html b/examples/preact/useThrottledValue/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useThrottledValue/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [instantSearch, setInstantSearch] = useState('')
+
+ // highest-level hook that watches an instant local state value and returns a throttled value
+ const [throttledSearch] = useThrottledValue(
+ instantSearch,
+ {
+ wait: 1000,
+ // enabled: instantSearch.length > 2, // optional, defaults to true
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (_state) => ({}), // No specific state access needed for this example
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useThrottledValue Example 1
+| Instant Count: | +{instantCount} | +
| Throttled Count: | +{throttledCount} | +
+
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+ const [currentValue, setCurrentValue] = useState(50)
+
+ // highest-level hook that watches an instant local state value and returns a throttled value
+ const [throttledValue, throttler] = useThrottledValue(
+ currentValue,
+ {
+ wait: 250,
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({
+ executionCount: state.executionCount,
+ }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useThrottledValue Example 2
+
+
+
+ | Instant Search: | +{instantSearch} | +
| Throttled Search: | +{throttledSearch} | +
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ TanStack Pacer useThrottledValue Example 3
+
+
+
+
+
+
+ | Instant Execution Count: | +{instantExecutionCount} | +
| Throttled Execution Count: | +{throttler.state.executionCount} | +
| Saved Executions: | ++ {instantExecutionCount - throttler.state.executionCount} ( + {instantExecutionCount > 0 + ? ( + ((instantExecutionCount - throttler.state.executionCount) / + instantExecutionCount) * + 100 + ).toFixed(2) + : 0} + % Reduction in execution calls) + | +
+
+ Throttled to 1 update per 250ms
+
+ {JSON.stringify(throttler.store.state, null, 2)}
+
+
+
+
+
,
+ root,
+)
diff --git a/examples/preact/useThrottledValue/tsconfig.json b/examples/preact/useThrottledValue/tsconfig.json
new file mode 100644
index 00000000..857b1ed4
--- /dev/null
+++ b/examples/preact/useThrottledValue/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src", "vite.config.ts"]
+}
diff --git a/examples/preact/useThrottledValue/vite.config.ts b/examples/preact/useThrottledValue/vite.config.ts
new file mode 100644
index 00000000..b995c32c
--- /dev/null
+++ b/examples/preact/useThrottledValue/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [preact()],
+})
diff --git a/examples/preact/useThrottler/README.md b/examples/preact/useThrottler/README.md
new file mode 100644
index 00000000..1cf88926
--- /dev/null
+++ b/examples/preact/useThrottler/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install`
+- `npm run dev`
diff --git a/examples/preact/useThrottler/index.html b/examples/preact/useThrottler/index.html
new file mode 100644
index 00000000..88e31073
--- /dev/null
+++ b/examples/preact/useThrottler/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ )
+}
+
+function App2() {
+ const [instantSearch, setInstantSearch] = useState('')
+ const [throttledSearch, setThrottledSearch] = useState('')
+
+ // Lower-level useThrottler hook - requires you to manage your own state
+ const setSearchThrottler = useThrottler(
+ setThrottledSearch,
+ {
+ wait: 1000,
+ enabled: instantSearch.length > 2,
+ },
+ // Optional Selector function to pick the state you want to track and use
+
+ (state) => ({ executionCount: state.executionCount }),
+ )
+
+ function handleSearchChange(e: JSX.TargetedEventTanStack Pacer useThrottler Example 1
+| Execution Count: | +{setCountThrottler.state.executionCount} | +
| Instant Count: | +{instantCount} | +
| Throttled Count: | +{throttledCount} | +
+
+
+
+
+ {JSON.stringify(setCountThrottler.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+function App3() {
+ const [instantExecutionCount, setInstantExecutionCount] = useState(0)
+ const [currentValue, setCurrentValue] = useState(50)
+ const [throttledValue, setThrottledValue] = useState(50)
+
+ // Lower-level useThrottler hook - requires you to manage your own state
+ const setValueThrottler = useThrottler(
+ setThrottledValue,
+ {
+ wait: 250,
+ // leading: true, // default
+ // trailing: true, // default
+ },
+ // Optional Selector function to pick the state you want to track and use
+ (state) => ({ executionCount: state.executionCount }),
+ )
+
+ function handleRangeChange(e: JSX.TargetedEventTanStack Pacer useThrottler Example 2
+
+
+
+ | Execution Count: | +{setSearchThrottler.state.executionCount} | +
| Instant Search: | +{instantSearch} | +
| Throttled Search: | +{throttledSearch} | +
+
+
+
+ {JSON.stringify(setSearchThrottler.store.state, null, 2)}
+
+
+
+
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(
+ // optionally, provide default options to an optional PacerProvider
+ TanStack Pacer useThrottler Example 3
+
+
+
+
+
+
+ | Instant Execution Count: | +{instantExecutionCount} | +
| Throttled Execution Count: | +{setValueThrottler.state.executionCount} | +
| Saved Executions: | ++ {instantExecutionCount - setValueThrottler.state.executionCount} ( + {instantExecutionCount > 0 + ? ( + ((instantExecutionCount - + setValueThrottler.state.executionCount) / + instantExecutionCount) * + 100 + ).toFixed(2) + : 0} + % Reduction in execution calls) + | +
+
+ Throttled to 1 update per 250ms (trailing edge)
+
+
+
+
+ {JSON.stringify(setValueThrottler.store.state, null, 2)}
+
+
+
+
+
+ +
+
+
+ )
+}
+
+const root = document.getElementById('root')!
+render(+ TanStack Pacer Utilities Comparison +
+ +
+
+
+ + Instant Slider (Move this slider to see the utilities in action) +
+
+
+
+
+ Total Interactions: {instantExecutionCount}
+
+
+ {utilityData.map((utility) => {
+ const syncStatus = getSyncStatus(utility.value, utility.name)
+ return (
+
+
+
+
+ )
+ })}
+ + {utility.name} +
++ {utility.description} +
+ +
+
+
+
+
+ Value: {utility.value}
+
+
+
+ {syncStatus.isOutOfSync ? (
+
+
+
+ alert(
+ 'These sliders are read-only. Move the main slider at the top',
+ )
+ }
+ type="range"
+ min="0"
+ max="100"
+ value={utility.value}
+ readOnly
+ style={{
+ width: '100%',
+ margin: '2px 0',
+ accentColor: utility.color,
+ }}
+ />
+
+
+ {'flush' in utility && typeof utility.flush === 'function' && (
+
+ )}
+
+ Executions: {utility.state.executionCount}
+
+
+ Reduction:{' '}
+ {instantExecutionCount === 0
+ ? '0'
+ : Math.round(
+ ((instantExecutionCount -
+ utility.state.executionCount) /
+ instantExecutionCount) *
+ 100,
+ )}
+ %
+
+ {utility.name === 'Rate Limiter' && (
+
+ Rejections:{' '}
+ {(utility.state as any).rejectionCount}
+
+ )}
+ {utility.name === 'Queuer' && (
+ <>
+
+ Queue Size: {utility.state.size}
+
+
+ )}
+ {utility.name === 'Batcher' && (
+ <>
+
+ Batch Size: {utility.state.size}
+
+
+ Items Processed:{' '}
+ {(utility.state as any).totalItemsProcessed}
+
+
+ )}
+
+ Status: {utility.state.status}
+
+
+
+ + Detailed States +
+
+ {utilityData.map((utility) => (
+
+
+
+ ))}
+ + {utility.name} State +
+
+ {JSON.stringify(utility.state, null, 2)}
+
+
+ 
+
+
+
++ + + + + +
+ 
+ 
+
+ 
+
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+
+# TanStack Pacer
+
+A lightweight timing and scheduling library for debouncing, throttling, rate limiting, queuing, and batching.
+
+> [!NOTE]
+> TanStack Pacer is currently mostly a client-side only library, but it is being designed to be able to potentially be used on the server-side as well.
+
+- **Debouncing**
+ - Delay execution until after a period of inactivity for when you only care about the last execution in a sequence.
+ - Synchronous or Asynchronous Debounce utilities with promise support and error handling
+ - Control of leading, trailing, and enabled options
+- **Throttling**
+ - Smoothly limit the rate at which a function can fire
+ - Synchronous or Asynchronous Throttle utilities with promise support and error handling
+ - Control of leading, trailing, and enabled options.
+- **Rate Limiting**
+ - Limit the rate at which a function can fire over a period of time
+ - Synchronous or Asynchronous Rate Limiting utilities with promise support and error handling
+ - Fixed or Sliding Window variations of Rate Limiting
+- **Queuing**
+ - Queue functions to be executed in a specific order
+ - Choose from FIFO, LIFO, and Priority queue implementations
+ - Control processing speed with configurable wait times or concurrency limits
+ - Manage queue execution with start/stop capabilities
+ - Expire items from the queue after a configurable duration
+- **Batching**
+ - Chunk up multiple operations into larger batches to reduce total back-and-forth operations
+ - Batch by time period, batch size, whichever comes first, or a custom condition to trigger batch executions
+- **Async or Sync Variations**
+ - Choose between synchronous and asynchronous versions of each utility
+ - Optional error, success, and settled handling for async variations
+ - Retry and Abort support for async variations
+- **State Management**
+ - Uses TanStack Store under the hood for state management with fine-grained reactivity
+ - Easily integrate with your own state management library of choice
+ - Persist state to local or session storage for some utilities like rate limiting and queuing
+- **Convenient Hooks**
+ - Reduce boilerplate code with pre-built hooks like `useDebouncedCallback`, `useThrottledValue`, and `useQueuedState`, and more.
+ - Multiple layers of abstraction to choose from depending on your use case.
+ - Works with each framework's default state management solutions, or with whatever custom state management library that you prefer.
+- **Type Safety**
+ - Full type safety with TypeScript that makes sure that your functions will always be called with the correct arguments
+ - Generics for flexible and reusable utilities
+- **Framework Adapters**
+ - React, Solid, and more
+- **Tree Shaking**
+ - We, of course, get tree-shaking right for your applications by default, but we also provide extra deep imports for each utility, making it easier to embed these utilities into your libraries without increasing the bundle-phobia reports of your library.
+
+### Read the docs →
+
++ +> [!NOTE] +> You may know **TanSack Pacer** by our adapter names, too! +> +> - [**React Pacer**](https://tanstack.com/pacer/latest/docs/framework/react/react-pacer) +> - [**Preact Pacer**](https://tanstack.com/pacer/latest/docs/framework/preact/preact-pacer) +> - [**Solid Pacer**](https://tanstack.com/pacer/latest/docs/framework/solid/solid-pacer) +> - Angular Pacer - needs a contributor! +> - Svelte Pacer - needs a contributor! +> - Vue Pacer - needs a contributor! + +## Get Involved + +- We welcome issues and pull requests! +- Participate in [GitHub discussions](https://github.com/TanStack/pacer/discussions) +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) +- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions + +## Partners + +
+
+ 
+ |
+
+
+ 
+ |
+
+
+ 
+ |
+
+
+
+
+
+
+## Explore the TanStack Ecosystem
+
+- TanStack Config – Tooling for JS/TS packages
+- TanStack DB – Reactive sync client store
+- TanStack DevTools – Unified devtools panel
+- TanStack Form – Type‑safe form state
+- TanStack Query – Async state & caching
+- TanStack Ranger – Range & slider primitives
+- TanStack Router – Type‑safe routing, caching & URL state
+- TanStack Start – Full‑stack SSR & streaming
+- TanStack Store – Reactive data store
+- TanStack Table – Headless datagrids
+- TanStack Virtual – Virtualized rendering
+
+… and more at TanStack.com »
+
+
diff --git a/packages/preact-pacer-devtools/eslint.config.js b/packages/preact-pacer-devtools/eslint.config.js
new file mode 100644
index 00000000..c61c24df
--- /dev/null
+++ b/packages/preact-pacer-devtools/eslint.config.js
@@ -0,0 +1,11 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+ ...rootConfig,
+ {
+ rules: {},
+ },
+]
diff --git a/packages/preact-pacer-devtools/package.json b/packages/preact-pacer-devtools/package.json
new file mode 100644
index 00000000..414b7c88
--- /dev/null
+++ b/packages/preact-pacer-devtools/package.json
@@ -0,0 +1,65 @@
+{
+ "name": "@tanstack/preact-pacer-devtools",
+ "version": "0.4.0",
+ "description": "Preact adapter for devtools for Pacer.",
+ "author": "Tanner Linsley",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/TanStack/pacer.git",
+ "directory": "packages/pacer"
+ },
+ "homepage": "https://tanstack.com/pacer",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "keywords": [
+ "preact",
+ "debounce",
+ "throttle",
+ "rate-limit",
+ "queuer",
+ "queue",
+ "pacer"
+ ],
+ "type": "module",
+ "types": "./dist/index.d.ts",
+ "module": "./dist/index.js",
+ "exports": {
+ ".": "./dist/index.js",
+ "./production": "./dist/production.js",
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "engines": {
+ "node": ">=18"
+ },
+ "files": [
+ "dist/",
+ "src"
+ ],
+ "scripts": {
+ "clean": "premove ./build ./dist",
+ "lint:fix": "eslint ./src --fix",
+ "test:eslint": "eslint ./src",
+ "test:lib": "vitest",
+ "test:lib:dev": "pnpm test:lib --watch",
+ "test:types": "tsc",
+ "test:build": "publint --strict",
+ "build": "tsdown"
+ },
+ "peerDependencies": {
+ "preact": ">=10.0.0"
+ },
+ "dependencies": {
+ "@tanstack/devtools-utils": "^0.1.0",
+ "@tanstack/pacer-devtools": "workspace:*"
+ },
+ "devDependencies": {
+ "@preact/preset-vite": "^2.10.2",
+ "@testing-library/preact": "^3.2.4",
+ "preact": "^10.28.0"
+ },
+ "main": "./dist/index.js"
+}
diff --git a/packages/preact-pacer-devtools/src/PreactPacerDevtools.tsx b/packages/preact-pacer-devtools/src/PreactPacerDevtools.tsx
new file mode 100644
index 00000000..2444d02a
--- /dev/null
+++ b/packages/preact-pacer-devtools/src/PreactPacerDevtools.tsx
@@ -0,0 +1,10 @@
+import { createPreactPanel } from '@tanstack/devtools-utils/preact'
+import { PacerDevtoolsCore } from '@tanstack/pacer-devtools'
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact'
+
+export interface PacerDevtoolsPreactInit extends DevtoolsPanelProps {}
+
+const [PacerDevtoolsPanel, PacerDevtoolsPanelNoOp] =
+ createPreactPanel(PacerDevtoolsCore)
+
+export { PacerDevtoolsPanel, PacerDevtoolsPanelNoOp }
diff --git a/packages/preact-pacer-devtools/src/index.ts b/packages/preact-pacer-devtools/src/index.ts
new file mode 100644
index 00000000..a0017d8e
--- /dev/null
+++ b/packages/preact-pacer-devtools/src/index.ts
@@ -0,0 +1,16 @@
+'use client'
+
+import * as Devtools from './PreactPacerDevtools'
+import * as plugin from './plugin'
+
+export const PacerDevtoolsPanel =
+ process.env.NODE_ENV !== 'development'
+ ? Devtools.PacerDevtoolsPanelNoOp
+ : Devtools.PacerDevtoolsPanel
+
+export const pacerDevtoolsPlugin =
+ process.env.NODE_ENV !== 'development'
+ ? plugin.pacerDevtoolsNoOpPlugin
+ : plugin.pacerDevtoolsPlugin
+
+export type { PacerDevtoolsPreactInit } from './PreactPacerDevtools'
diff --git a/packages/preact-pacer-devtools/src/plugin.tsx b/packages/preact-pacer-devtools/src/plugin.tsx
new file mode 100644
index 00000000..3a4d186c
--- /dev/null
+++ b/packages/preact-pacer-devtools/src/plugin.tsx
@@ -0,0 +1,9 @@
+import { createPreactPlugin } from '@tanstack/devtools-utils/preact'
+import { PacerDevtoolsPanel } from './PreactPacerDevtools'
+
+const [pacerDevtoolsPlugin, pacerDevtoolsNoOpPlugin] = createPreactPlugin({
+ name: 'TanStack Pacer',
+ Component: PacerDevtoolsPanel,
+})
+
+export { pacerDevtoolsPlugin, pacerDevtoolsNoOpPlugin }
diff --git a/packages/preact-pacer-devtools/src/production.ts b/packages/preact-pacer-devtools/src/production.ts
new file mode 100644
index 00000000..54beedc0
--- /dev/null
+++ b/packages/preact-pacer-devtools/src/production.ts
@@ -0,0 +1,7 @@
+'use client'
+
+export { PacerDevtoolsPanel } from './PreactPacerDevtools'
+
+export type { PacerDevtoolsPreactInit } from './PreactPacerDevtools'
+
+export { pacerDevtoolsPlugin } from './plugin'
diff --git a/packages/preact-pacer-devtools/tests/index.test.ts b/packages/preact-pacer-devtools/tests/index.test.ts
new file mode 100644
index 00000000..7be68cd7
--- /dev/null
+++ b/packages/preact-pacer-devtools/tests/index.test.ts
@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest'
+
+describe('preact-pacer-devtools', () => {
+ it('should export pacerDevtoolsPlugin', () => {
+ expect(true).toBe(true)
+ })
+})
diff --git a/packages/preact-pacer-devtools/tests/test-setup.ts b/packages/preact-pacer-devtools/tests/test-setup.ts
new file mode 100644
index 00000000..8fc6d383
--- /dev/null
+++ b/packages/preact-pacer-devtools/tests/test-setup.ts
@@ -0,0 +1,9 @@
+import { expect, afterEach } from 'vitest'
+import { cleanup } from '@testing-library/preact'
+import * as matchers from '@testing-library/jest-dom/matchers'
+
+expect.extend(matchers)
+
+afterEach(() => {
+ cleanup()
+})
diff --git a/packages/preact-pacer-devtools/tsconfig.json b/packages/preact-pacer-devtools/tsconfig.json
new file mode 100644
index 00000000..f233899b
--- /dev/null
+++ b/packages/preact-pacer-devtools/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "extends": "../../tsconfig.json",
+ "include": ["src", "vite.config.ts", "tests"],
+ "exclude": ["eslint.config.js"],
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact"
+ }
+}
diff --git a/packages/preact-pacer-devtools/tsdown.config.ts b/packages/preact-pacer-devtools/tsdown.config.ts
new file mode 100644
index 00000000..829205a1
--- /dev/null
+++ b/packages/preact-pacer-devtools/tsdown.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from 'tsdown'
+import preact from '@preact/preset-vite'
+
+export default defineConfig({
+ plugins: [preact()],
+ entry: ['./src/index.ts', './src/production.ts'],
+ format: ['esm'],
+ unbundle: true,
+ dts: true,
+ sourcemap: true,
+ clean: true,
+ minify: false,
+ fixedExtension: false,
+ exports: true,
+ publint: {
+ strict: true,
+ },
+})
diff --git a/packages/preact-pacer-devtools/vitest.config.ts b/packages/preact-pacer-devtools/vitest.config.ts
new file mode 100644
index 00000000..4ec3f84a
--- /dev/null
+++ b/packages/preact-pacer-devtools/vitest.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config'
+import preact from '@preact/preset-vite'
+import packageJson from './package.json' with { type: 'json' }
+
+export default defineConfig({
+ plugins: [preact()],
+ test: {
+ name: packageJson.name,
+ dir: './',
+ watch: false,
+ environment: 'happy-dom',
+ setupFiles: ['./tests/test-setup.ts'],
+ globals: true,
+ },
+})
diff --git a/packages/preact-pacer/CHANGELOG.md b/packages/preact-pacer/CHANGELOG.md
new file mode 100644
index 00000000..cb1ec2f9
--- /dev/null
+++ b/packages/preact-pacer/CHANGELOG.md
@@ -0,0 +1 @@
+# @tanstack/preact-pacer
diff --git a/packages/preact-pacer/README.md b/packages/preact-pacer/README.md
new file mode 100644
index 00000000..8192960c
--- /dev/null
+++ b/packages/preact-pacer/README.md
@@ -0,0 +1,165 @@
+
++We're looking for TanStack Pacer Partners to join our mission! Partner with us to push the boundaries of TanStack Pacer and build amazing things together. +
+LET'S CHAT +
+
+
+
+
++ + + + + +
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+
+# TanStack Pacer
+
+A lightweight timing and scheduling library for debouncing, throttling, rate limiting, queuing, and batching.
+
+> [!NOTE]
+> TanStack Pacer is currently mostly a client-side only library, but it is being designed to be able to potentially be used on the server-side as well.
+
+- **Debouncing**
+ - Delay execution until after a period of inactivity for when you only care about the last execution in a sequence.
+ - Synchronous or Asynchronous Debounce utilities with promise support and error handling
+ - Control of leading, trailing, and enabled options
+- **Throttling**
+ - Smoothly limit the rate at which a function can fire
+ - Synchronous or Asynchronous Throttle utilities with promise support and error handling
+ - Control of leading, trailing, and enabled options.
+- **Rate Limiting**
+ - Limit the rate at which a function can fire over a period of time
+ - Synchronous or Asynchronous Rate Limiting utilities with promise support and error handling
+ - Fixed or Sliding Window variations of Rate Limiting
+- **Queuing**
+ - Queue functions to be executed in a specific order
+ - Choose from FIFO, LIFO, and Priority queue implementations
+ - Control processing speed with configurable wait times or concurrency limits
+ - Manage queue execution with start/stop capabilities
+ - Expire items from the queue after a configurable duration
+- **Batching**
+ - Chunk up multiple operations into larger batches to reduce total back-and-forth operations
+ - Batch by time period, batch size, whichever comes first, or a custom condition to trigger batch executions
+- **Async or Sync Variations**
+ - Choose between synchronous and asynchronous versions of each utility
+ - Optional error, success, and settled handling for async variations
+ - Retry and Abort support for async variations
+- **State Management**
+ - Uses TanStack Store under the hood for state management with fine-grained reactivity
+ - Easily integrate with your own state management library of choice
+ - Persist state to local or session storage for some utilities like rate limiting and queuing
+- **Convenient Hooks**
+ - Reduce boilerplate code with pre-built hooks like `useDebouncedCallback`, `useThrottledValue`, and `useQueuedState`, and more.
+ - Multiple layers of abstraction to choose from depending on your use case.
+ - Works with each framework's default state management solutions, or with whatever custom state management library that you prefer.
+- **Type Safety**
+ - Full type safety with TypeScript that makes sure that your functions will always be called with the correct arguments
+ - Generics for flexible and reusable utilities
+- **Framework Adapters**
+ - React, Solid, and more
+- **Tree Shaking**
+ - We, of course, get tree-shaking right for your applications by default, but we also provide extra deep imports for each utility, making it easier to embed these utilities into your libraries without increasing the bundle-phobia reports of your library.
+
+### Read the docs →
+
++ +> [!NOTE] +> You may know **TanSack Pacer** by our adapter names, too! +> +> - [**React Pacer**](https://tanstack.com/pacer/latest/docs/framework/react/react-pacer) +> - [**Solid Pacer**](https://tanstack.com/pacer/latest/docs/framework/solid/solid-pacer) +> - Angular Pacer - needs a contributor! +> - Preact Pacer - Coming soon! (After React Pacer is more fleshed out) +> - Svelte Pacer - needs a contributor! +> - Vue Pacer - needs a contributor! + +## Get Involved + +- We welcome issues and pull requests! +- Participate in [GitHub discussions](https://github.com/TanStack/pacer/discussions) +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) +- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions + +## Partners + +
|
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+
+
+
+## Explore the TanStack Ecosystem
+
+- TanStack Config – Tooling for JS/TS packages
+- TanStack DB – Reactive sync client store
+- TanStack DevTools – Unified devtools panel
+- TanStack Form – Type‑safe form state
+- TanStack Query – Async state & caching
+- TanStack Ranger – Range & slider primitives
+- TanStack Router – Type‑safe routing, caching & URL state
+- TanStack Start – Full‑stack SSR & streaming
+- TanStack Store – Reactive data store
+- TanStack Table – Headless datagrids
+- TanStack Virtual – Virtualized rendering
+
+… and more at TanStack.com »
+
+
diff --git a/packages/preact-pacer/eslint.config.js b/packages/preact-pacer/eslint.config.js
new file mode 100644
index 00000000..8f561f82
--- /dev/null
+++ b/packages/preact-pacer/eslint.config.js
@@ -0,0 +1,18 @@
+// @ts-check
+
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+import rootConfig from '../../eslint.config.js'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+ ...rootConfig,
+ {
+ plugins: {
+ 'react-hooks': pluginReactHooks,
+ },
+ rules: {
+ 'react-hooks/exhaustive-deps': 'error',
+ 'react-hooks/rules-of-hooks': 'error',
+ },
+ },
+]
diff --git a/packages/preact-pacer/package.json b/packages/preact-pacer/package.json
new file mode 100644
index 00000000..f814872c
--- /dev/null
+++ b/packages/preact-pacer/package.json
@@ -0,0 +1,121 @@
+{
+ "name": "@tanstack/preact-pacer",
+ "version": "0.17.3",
+ "description": "Utilities for debouncing and throttling functions in Preact.",
+ "author": "Tanner Linsley",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/TanStack/pacer.git",
+ "directory": "packages/preact-pacer"
+ },
+ "homepage": "https://tanstack.com/pacer",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "keywords": [
+ "preact",
+ "debounce",
+ "throttle",
+ "rate-limit",
+ "queue",
+ "async"
+ ],
+ "type": "module",
+ "types": "./dist/index.d.cts",
+ "main": "./dist/index.cjs",
+ "module": "./dist/index.js",
+ "exports": {
+ ".": {
+ "require": "./dist/index.cjs",
+ "import": "./dist/index.js"
+ },
+ "./async-batcher": {
+ "require": "./dist/async-batcher/index.cjs",
+ "import": "./dist/async-batcher/index.js"
+ },
+ "./async-debouncer": {
+ "require": "./dist/async-debouncer/index.cjs",
+ "import": "./dist/async-debouncer/index.js"
+ },
+ "./async-queuer": {
+ "require": "./dist/async-queuer/index.cjs",
+ "import": "./dist/async-queuer/index.js"
+ },
+ "./async-rate-limiter": {
+ "require": "./dist/async-rate-limiter/index.cjs",
+ "import": "./dist/async-rate-limiter/index.js"
+ },
+ "./async-retryer": {
+ "require": "./dist/async-retryer/index.cjs",
+ "import": "./dist/async-retryer/index.js"
+ },
+ "./async-throttler": {
+ "require": "./dist/async-throttler/index.cjs",
+ "import": "./dist/async-throttler/index.js"
+ },
+ "./batcher": {
+ "require": "./dist/batcher/index.cjs",
+ "import": "./dist/batcher/index.js"
+ },
+ "./debouncer": {
+ "require": "./dist/debouncer/index.cjs",
+ "import": "./dist/debouncer/index.js"
+ },
+ "./provider": {
+ "require": "./dist/provider/index.cjs",
+ "import": "./dist/provider/index.js"
+ },
+ "./queuer": {
+ "require": "./dist/queuer/index.cjs",
+ "import": "./dist/queuer/index.js"
+ },
+ "./rate-limiter": {
+ "require": "./dist/rate-limiter/index.cjs",
+ "import": "./dist/rate-limiter/index.js"
+ },
+ "./throttler": {
+ "require": "./dist/throttler/index.cjs",
+ "import": "./dist/throttler/index.js"
+ },
+ "./types": {
+ "require": "./dist/types/index.cjs",
+ "import": "./dist/types/index.js"
+ },
+ "./utils": {
+ "require": "./dist/utils/index.cjs",
+ "import": "./dist/utils/index.js"
+ },
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "engines": {
+ "node": ">=18"
+ },
+ "files": [
+ "dist",
+ "src"
+ ],
+ "scripts": {
+ "clean": "premove ./build ./dist",
+ "test:eslint": "eslint ./src",
+ "test:lib": "vitest --passWithNoTests",
+ "test:lib:dev": "pnpm test:lib --watch",
+ "test:types": "tsc",
+ "test:build": "publint --strict",
+ "build": "tsdown"
+ },
+ "dependencies": {
+ "@tanstack/pacer": "workspace:*",
+ "@tanstack/preact-store": "^0.10.1"
+ },
+ "devDependencies": {
+ "@preact/preset-vite": "^2.10.2",
+ "eslint-plugin-react-hooks": "^7.0.1",
+ "preact": "^10.28.0"
+ },
+ "peerDependencies": {
+ "preact": ">=10.0.0"
+ }
+}
diff --git a/packages/preact-pacer/src/async-batcher/index.ts b/packages/preact-pacer/src/async-batcher/index.ts
new file mode 100644
index 00000000..71e04b3c
--- /dev/null
+++ b/packages/preact-pacer/src/async-batcher/index.ts
@@ -0,0 +1,4 @@
+export * from '@tanstack/pacer/async-batcher'
+
+export * from './useAsyncBatcher'
+export * from './useAsyncBatchedCallback'
diff --git a/packages/preact-pacer/src/async-batcher/useAsyncBatchedCallback.ts b/packages/preact-pacer/src/async-batcher/useAsyncBatchedCallback.ts
new file mode 100644
index 00000000..990d5e4e
--- /dev/null
+++ b/packages/preact-pacer/src/async-batcher/useAsyncBatchedCallback.ts
@@ -0,0 +1,54 @@
+import { useCallback } from 'preact/hooks'
+import { useAsyncBatcher } from './useAsyncBatcher'
+import type { AsyncBatcherOptions } from '@tanstack/pacer/async-batcher'
+import type { AnyAsyncFunction } from '@tanstack/pacer/types'
+
+/**
+ * A Preact hook that creates a batched version of an async callback function.
+ * This hook is a convenient wrapper around the `useAsyncBatcher` hook,
+ * providing a stable, batched async function reference for use in Preact components.
+ *
+ * The batched async function will collect individual calls into batches and execute them
+ * when batch conditions are met (max size reached, wait time elapsed, or custom logic).
+ * The returned function always returns a promise that resolves with undefined (since the
+ * batch function processes multiple items together).
+ *
+ * This hook provides a simpler API compared to `useAsyncBatcher`, making it ideal for basic
+ * async batching needs. However, it does not expose the underlying AsyncBatcher instance.
+ *
+ * For advanced usage requiring features like:
+ * - Manual batch execution
+ * - Access to batch results and state
+ * - Custom useCallback dependencies
+ *
+ * Consider using the `useAsyncBatcher` hook instead.
+ *
+ * @example
+ * ```tsx
+ * // Batch API requests
+ * const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {
+ * const results = await Promise.all(requests.map(req => fetch(req.url)));
+ * return results.map(res => res.json());
+ * }, {
+ * maxSize: 10, // Process when 10 requests collected
+ * wait: 1000 // Or after 1 second
+ * });
+ *
+ * // Use in event handlers
+ *
+ * ```
+ */
+export function useAsyncBatchedCallback
++We're looking for TanStack Pacer Partners to join our mission! Partner with us to push the boundaries of TanStack Pacer and build amazing things together. +
+LET'S CHAT +