@tanstack/preact-pacer 0.19.4 → 0.21.0

package/src/async-rate-limiter/useAsyncRateLimiter.ts

@@ -1,6 +1,6 @@
-import { useMemo, useState } from 'preact/hooks'
+import { useEffect, useMemo, useState } from 'preact/hooks'
 import { AsyncRateLimiter } from '@tanstack/pacer/async-rate-limiter'
-import { useStore } from '@tanstack/preact-store'
+import { shallow, useStore } from '@tanstack/preact-store'
 import { useDefaultPacerOptions } from '../provider/PacerProvider'
 import type { Store } from '@tanstack/preact-store'
 import type { AnyAsyncFunction } from '@tanstack/pacer/types'
@@ -10,6 +10,17 @@ import type {
 } from '@tanstack/pacer/async-rate-limiter'
 import type { ComponentChildren } from 'preact'
 
+export interface PreactAsyncRateLimiterOptions<
+  TFn extends AnyAsyncFunction,
+  TSelected = {},
+> extends AsyncRateLimiterOptions<TFn> {
+  /**
+   * Optional callback invoked when the component unmounts. Receives the rate limiter instance.
+   * When provided, replaces the default cleanup (abort); use it to call reset(), add logging, etc.
+   */
+  onUnmount?: (rateLimiter: PreactAsyncRateLimiter<TFn, TSelected>) => void
+}
+
 export interface PreactAsyncRateLimiter<
   TFn extends AnyAsyncFunction,
   TSelected = {},
@@ -103,6 +114,12 @@ export interface PreactAsyncRateLimiter<
  * - `settleCount`: Number of function executions that have completed (success or error)
  * - `successCount`: Number of function executions that have completed successfully
  *
+ * ## Unmount behavior
+ *
+ * By default, the hook aborts any in-flight execution when the component unmounts.
+ * Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+ * Use the `onUnmount` option to customize this.
+ *
  * @example
  * ```tsx
  * // Default behavior - no reactive state subscriptions
@@ -216,14 +233,14 @@ export function useAsyncRateLimiter<
   TSelected = {},
 >(
   fn: TFn,
-  options: AsyncRateLimiterOptions<TFn>,
+  options: PreactAsyncRateLimiterOptions<TFn, TSelected>,
   selector: (state: AsyncRateLimiterState<TFn>) => TSelected = () =>
     ({}) as TSelected,
 ): PreactAsyncRateLimiter<TFn, TSelected> {
   const mergedOptions = {
     ...useDefaultPacerOptions().asyncRateLimiter,
     ...options,
-  } as AsyncRateLimiterOptions<TFn>
+  } as PreactAsyncRateLimiterOptions<TFn, TSelected>
 
   const [asyncRateLimiter] = useState(() => {
     const rateLimiterInstance = new AsyncRateLimiter<TFn>(
@@ -235,7 +252,9 @@ export function useAsyncRateLimiter<
       selector: (state: AsyncRateLimiterState<TFn>) => TSelected
       children: ((state: TSelected) => ComponentChildren) | ComponentChildren
     }) {
-      const selected = useStore(rateLimiterInstance.store, props.selector)
+      const selected = useStore(rateLimiterInstance.store, props.selector, {
+        equal: shallow,
+      })
 
       return typeof props.children === 'function'
         ? props.children(selected)
@@ -248,7 +267,19 @@ export function useAsyncRateLimiter<
   asyncRateLimiter.fn = fn
   asyncRateLimiter.setOptions(mergedOptions)
 
-  const state = useStore(asyncRateLimiter.store, selector)
+  /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */
+  useEffect(() => {
+    return () => {
+      if (mergedOptions.onUnmount) {
+        mergedOptions.onUnmount(asyncRateLimiter)
+      } else {
+        asyncRateLimiter.abort()
+      }
+    }
+  }, [])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  const state = useStore(asyncRateLimiter.store, selector, { equal: shallow })
 
   return useMemo(
     () =>

package/src/async-throttler/useAsyncThrottledCallback.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'preact/hooks'
 import { useAsyncThrottler } from './useAsyncThrottler'
-import type { AsyncThrottlerOptions } from '@tanstack/pacer/async-throttler'
+import type { PreactAsyncThrottlerOptions } from './useAsyncThrottler'
 import type { AnyAsyncFunction } from '@tanstack/pacer/types'
 
 /**
@@ -41,7 +41,7 @@ import type { AnyAsyncFunction } from '@tanstack/pacer/types'
  */
 export function useAsyncThrottledCallback<TFn extends AnyAsyncFunction>(
   fn: TFn,
-  options: AsyncThrottlerOptions<TFn>,
+  options: PreactAsyncThrottlerOptions<TFn, {}>,
 ): (...args: Parameters<TFn>) => Promise<ReturnType<TFn>> {
   const asyncThrottledFn = useAsyncThrottler(fn, options).maybeExecute
   return useCallback(

package/src/async-throttler/useAsyncThrottler.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'preact/hooks'
 import { AsyncThrottler } from '@tanstack/pacer/async-throttler'
-import { useStore } from '@tanstack/preact-store'
+import { shallow, useStore } from '@tanstack/preact-store'
 import { useDefaultPacerOptions } from '../provider/PacerProvider'
 import type { Store } from '@tanstack/preact-store'
 import type { AnyAsyncFunction } from '@tanstack/pacer/types'
@@ -10,6 +10,17 @@ import type {
 } from '@tanstack/pacer/async-throttler'
 import type { ComponentChildren } from 'preact'
 
+export interface PreactAsyncThrottlerOptions<
+  TFn extends AnyAsyncFunction,
+  TSelected = {},
+> extends AsyncThrottlerOptions<TFn> {
+  /**
+   * Optional callback invoked when the component unmounts. Receives the throttler instance.
+   * When provided, replaces the default cleanup (cancel + abort); use it to call flush(), reset(), cancel(), add logging, etc.
+   */
+  onUnmount?: (throttler: PreactAsyncThrottler<TFn, TSelected>) => void
+}
+
 export interface PreactAsyncThrottler<
   TFn extends AnyAsyncFunction,
   TSelected = {},
@@ -99,6 +110,24 @@ export interface PreactAsyncThrottler<
  * - `status`: Current execution status ('disabled' | 'idle' | 'pending' | 'executing' | 'settled')
  * - `successCount`: Number of function executions that have completed successfully
  *
+ * ## Unmount behavior
+ *
+ * By default, the hook cancels any pending execution and aborts any in-flight execution when the component unmounts.
+ * Abort only cancels underlying operations (e.g. fetch) when the abort signal from `getAbortSignal()` is passed to them.
+ * Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+ *
+ * ```tsx
+ * const throttler = useAsyncThrottler(fn, {
+ *   wait: 1000,
+ *   onUnmount: (t) => t.flush()
+ * });
+ * ```
+ *
+ * Note: For async utils, `flush()` returns a Promise and runs fire-and-forget in the cleanup.
+ * If your throttled function updates Preact state, those updates may run after the component has
+ * unmounted, which can cause "setState on unmounted component" warnings. Guard your callbacks
+ * accordingly when using onUnmount with flush.
+ *
  * @example
  * ```tsx
  * // Default behavior - no reactive state subscriptions
@@ -195,15 +224,14 @@ export interface PreactAsyncThrottler<
  */
 export function useAsyncThrottler<TFn extends AnyAsyncFunction, TSelected = {}>(
   fn: TFn,
-  options: AsyncThrottlerOptions<TFn>,
+  options: PreactAsyncThrottlerOptions<TFn, TSelected>,
   selector: (state: AsyncThrottlerState<TFn>) => TSelected = () =>
     ({}) as TSelected,
 ): PreactAsyncThrottler<TFn, TSelected> {
   const mergedOptions = {
     ...useDefaultPacerOptions().asyncThrottler,
     ...options,
-  } as AsyncThrottlerOptions<TFn>
-
+  } as PreactAsyncThrottlerOptions<TFn, TSelected>
   const [asyncThrottler] = useState(() => {
     const throttlerInstance = new AsyncThrottler<TFn>(
       fn,
@@ -214,7 +242,9 @@ export function useAsyncThrottler<TFn extends AnyAsyncFunction, TSelected = {}>(
       selector: (state: AsyncThrottlerState<TFn>) => TSelected
       children: ((state: TSelected) => ComponentChildren) | ComponentChildren
     }) {
-      const selected = useStore(throttlerInstance.store, props.selector)
+      const selected = useStore(throttlerInstance.store, props.selector, {
+        equal: shallow,
+      })
 
       return typeof props.children === 'function'
         ? props.children(selected)
@@ -227,11 +257,20 @@ export function useAsyncThrottler<TFn extends AnyAsyncFunction, TSelected = {}>(
   asyncThrottler.fn = fn
   asyncThrottler.setOptions(mergedOptions)
 
-  const state = useStore(asyncThrottler.store, selector)
+  const state = useStore(asyncThrottler.store, selector, { equal: shallow })
 
+  /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */
   useEffect(() => {
-    return () => asyncThrottler.cancel()
-  }, [asyncThrottler])
+    return () => {
+      if (mergedOptions.onUnmount) {
+        mergedOptions.onUnmount(asyncThrottler)
+      } else {
+        asyncThrottler.cancel()
+        asyncThrottler.abort()
+      }
+    }
+  }, [])
+  /* eslint-enable react-hooks/exhaustive-deps */
 
   return useMemo(
     () =>

package/src/batcher/useBatchedCallback.ts

@@ -1,7 +1,6 @@
 import { useCallback } from 'preact/hooks'
 import { useBatcher } from './useBatcher'
-import type { BatcherOptions } from '@tanstack/pacer/batcher'
-import type { AnyFunction } from '@tanstack/pacer/types'
+import type { PreactBatcherOptions } from './useBatcher'
 
 /**
  * A Preact hook that creates a batched version of a callback function.
@@ -38,13 +37,10 @@ import type { AnyFunction } from '@tanstack/pacer/types'
  * </button>
  * ```
  */
-export function useBatchedCallback<TFn extends AnyFunction>(
-  fn: (items: Array<Parameters<TFn>[0]>) => void,
-  options: BatcherOptions<Parameters<TFn>[0]>,
-): (...args: Parameters<TFn>) => void {
+export function useBatchedCallback<TValue>(
+  fn: (items: Array<TValue>) => void,
+  options: PreactBatcherOptions<TValue, {}>,
+): (item: TValue) => void {
   const batchedFn = useBatcher(fn, options).addItem
-  return useCallback(
-    (...args: Parameters<TFn>) => batchedFn(args[0]),
-    [batchedFn],
-  )
+  return useCallback((item: TValue) => batchedFn(item), [batchedFn])
 }

package/src/batcher/useBatcher.ts

@@ -1,11 +1,22 @@
-import { useMemo, useState } from 'preact/hooks'
+import { useEffect, useMemo, useState } from 'preact/hooks'
 import { Batcher } from '@tanstack/pacer/batcher'
-import { useStore } from '@tanstack/preact-store'
+import { shallow, useStore } from '@tanstack/preact-store'
 import { useDefaultPacerOptions } from '../provider/PacerProvider'
 import type { Store } from '@tanstack/preact-store'
 import type { BatcherOptions, BatcherState } from '@tanstack/pacer/batcher'
 import type { ComponentChildren } from 'preact'
 
+export interface PreactBatcherOptions<
+  TValue,
+  TSelected = {},
+> extends BatcherOptions<TValue> {
+  /**
+   * Optional callback invoked when the component unmounts. Receives the batcher instance.
+   * When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+   */
+  onUnmount?: (batcher: PreactBatcher<TValue, TSelected>) => void
+}
+
 export interface PreactBatcher<TValue, TSelected = {}> extends Omit<
   Batcher<TValue>,
   'store'
@@ -84,6 +95,19 @@ export interface PreactBatcher<TValue, TSelected = {}> extends Omit<
  * - `status`: Current processing status ('idle' | 'pending')
  * - `totalItemsProcessed`: Total number of items processed across all batches
  *
+ * ## Unmount behavior
+ *
+ * By default, the hook cancels any pending batch when the component unmounts.
+ * Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+ *
+ * ```tsx
+ * const batcher = useBatcher(fn, {
+ *   maxSize: 10,
+ *   wait: 2000,
+ *   onUnmount: (b) => b.flush()
+ * });
+ * ```
+ *
  * @example
  * ```tsx
  * // Default behavior - no reactive state subscriptions
@@ -158,14 +182,14 @@ export interface PreactBatcher<TValue, TSelected = {}> extends Omit<
  */
 export function useBatcher<TValue, TSelected = {}>(
   fn: (items: Array<TValue>) => void,
-  options: BatcherOptions<TValue> = {},
+  options: PreactBatcherOptions<TValue, TSelected> = {},
   selector: (state: BatcherState<TValue>) => TSelected = () =>
     ({}) as TSelected,
 ): PreactBatcher<TValue, TSelected> {
   const mergedOptions = {
     ...useDefaultPacerOptions().batcher,
     ...options,
-  } as BatcherOptions<TValue>
+  } as PreactBatcherOptions<TValue, TSelected>
 
   const [batcher] = useState(() => {
     const batcherInstance = new Batcher<TValue>(
@@ -177,7 +201,9 @@ export function useBatcher<TValue, TSelected = {}>(
       selector: (state: BatcherState<TValue>) => TSelected
       children: ((state: TSelected) => ComponentChildren) | ComponentChildren
     }) {
-      const selected = useStore(batcherInstance.store, props.selector)
+      const selected = useStore(batcherInstance.store, props.selector, {
+        equal: shallow,
+      })
 
       return typeof props.children === 'function'
         ? props.children(selected)
@@ -190,7 +216,19 @@ export function useBatcher<TValue, TSelected = {}>(
   batcher.fn = fn
   batcher.setOptions(mergedOptions)
 
-  const state = useStore(batcher.store, selector)
+  /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */
+  useEffect(() => {
+    return () => {
+      if (mergedOptions.onUnmount) {
+        mergedOptions.onUnmount(batcher)
+      } else {
+        batcher.cancel()
+      }
+    }
+  }, [])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  const state = useStore(batcher.store, selector, { equal: shallow })
 
   return useMemo(
     () =>

package/src/debouncer/useDebouncedCallback.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'preact/hooks'
 import { useDebouncer } from './useDebouncer'
-import type { DebouncerOptions } from '@tanstack/pacer/debouncer'
+import type { PreactDebouncerOptions } from './useDebouncer'
 import type { AnyFunction } from '@tanstack/pacer/types'
 
 /**
@@ -41,7 +41,7 @@ import type { AnyFunction } from '@tanstack/pacer/types'
  */
 export function useDebouncedCallback<TFn extends AnyFunction>(
   fn: TFn,
-  options: DebouncerOptions<TFn>,
+  options: PreactDebouncerOptions<TFn, {}>,
 ): (...args: Parameters<TFn>) => void {
   const debouncedFn = useDebouncer(fn, options).maybeExecute
   return useCallback(

package/src/debouncer/useDebouncedState.ts

@@ -1,11 +1,8 @@
 import { useState } from 'preact/hooks'
 import { useDebouncer } from './useDebouncer'
+import type { PreactDebouncer, PreactDebouncerOptions } from './useDebouncer'
 import type { Dispatch, StateUpdater } from 'preact/hooks'
-import type { PreactDebouncer } from './useDebouncer'
-import type {
-  DebouncerOptions,
-  DebouncerState,
-} from '@tanstack/pacer/debouncer'
+import type { DebouncerState } from '@tanstack/pacer/debouncer'
 
 /**
  * A Preact hook that creates a debounced state value, combining Preact's useState with debouncing functionality.
@@ -84,7 +81,7 @@ export function useDebouncedState<
   TSelected = DebouncerState<Dispatch<StateUpdater<TValue>>>,
 >(
   value: TValue,
-  options: DebouncerOptions<Dispatch<StateUpdater<TValue>>>,
+  options: PreactDebouncerOptions<Dispatch<StateUpdater<TValue>>, TSelected>,
   selector?: (
     state: DebouncerState<Dispatch<StateUpdater<TValue>>>,
   ) => TSelected,

package/src/debouncer/useDebouncedValue.ts

@@ -1,11 +1,8 @@
 import { useEffect } from 'preact/hooks'
 import { useDebouncedState } from './useDebouncedState'
+import type { PreactDebouncer, PreactDebouncerOptions } from './useDebouncer'
 import type { Dispatch, StateUpdater } from 'preact/hooks'
-import type { PreactDebouncer } from './useDebouncer'
-import type {
-  DebouncerOptions,
-  DebouncerState,
-} from '@tanstack/pacer/debouncer'
+import type { DebouncerState } from '@tanstack/pacer/debouncer'
 
 /**
  * A Preact hook that creates a debounced value that updates only after a specified delay.
@@ -93,7 +90,7 @@ export function useDebouncedValue<
   TSelected = DebouncerState<Dispatch<StateUpdater<TValue>>>,
 >(
   value: TValue,
-  options: DebouncerOptions<Dispatch<StateUpdater<TValue>>>,
+  options: PreactDebouncerOptions<Dispatch<StateUpdater<TValue>>, TSelected>,
   selector?: (
     state: DebouncerState<Dispatch<StateUpdater<TValue>>>,
   ) => TSelected,

package/src/debouncer/useDebouncer.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'preact/hooks'
 import { Debouncer } from '@tanstack/pacer/debouncer'
-import { useStore } from '@tanstack/preact-store'
+import { shallow, useStore } from '@tanstack/preact-store'
 import { useDefaultPacerOptions } from '../provider/PacerProvider'
 import type { Store } from '@tanstack/preact-store'
 import type {
@@ -10,6 +10,17 @@ import type {
 import type { AnyFunction } from '@tanstack/pacer/types'
 import type { ComponentChildren } from 'preact'
 
+export interface PreactDebouncerOptions<
+  TFn extends AnyFunction,
+  TSelected = {},
+> extends DebouncerOptions<TFn> {
+  /**
+   * Optional callback invoked when the component unmounts. Receives the debouncer instance.
+   * When provided, replaces the default cleanup (cancel); use it to call flush(), reset(), cancel(), add logging, etc.
+   */
+  onUnmount?: (debouncer: PreactDebouncer<TFn, TSelected>) => void
+}
+
 export interface PreactDebouncer<
   TFn extends AnyFunction,
   TSelected = {},
@@ -88,6 +99,18 @@ export interface PreactDebouncer<
  * - `lastArgs`: The arguments from the most recent call to maybeExecute
  * - `status`: Current execution status ('disabled' | 'idle' | 'pending')
  *
+ * ## Unmount behavior
+ *
+ * By default, the hook cancels any pending execution when the component unmounts.
+ * Use the `onUnmount` option to customize this. For example, to flush pending work instead:
+ *
+ * ```tsx
+ * const debouncer = useDebouncer(fn, {
+ *   wait: 500,
+ *   onUnmount: (d) => d.flush()
+ * });
+ * ```
+ *
  * @example
  * ```tsx
  * // Default behavior - no reactive state subscriptions
@@ -139,14 +162,13 @@ export interface PreactDebouncer<
  */
 export function useDebouncer<TFn extends AnyFunction, TSelected = {}>(
   fn: TFn,
-  options: DebouncerOptions<TFn>,
+  options: PreactDebouncerOptions<TFn, TSelected>,
   selector: (state: DebouncerState<TFn>) => TSelected = () => ({}) as TSelected,
 ): PreactDebouncer<TFn, TSelected> {
   const mergedOptions = {
     ...useDefaultPacerOptions().debouncer,
     ...options,
-  } as DebouncerOptions<TFn>
-
+  } as PreactDebouncerOptions<TFn, TSelected>
   const [debouncer] = useState(() => {
     const debouncerInstance = new Debouncer(
       fn,
@@ -157,7 +179,9 @@ export function useDebouncer<TFn extends AnyFunction, TSelected = {}>(
       selector: (state: DebouncerState<TFn>) => TSelected
       children: ((state: TSelected) => ComponentChildren) | ComponentChildren
     }) {
-      const selected = useStore(debouncerInstance.store, props.selector)
+      const selected = useStore(debouncerInstance.store, props.selector, {
+        equal: shallow,
+      })
 
       return typeof props.children === 'function'
         ? props.children(selected)
@@ -170,13 +194,19 @@ export function useDebouncer<TFn extends AnyFunction, TSelected = {}>(
   debouncer.fn = fn
   debouncer.setOptions(mergedOptions)
 
+  /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */
   useEffect(() => {
     return () => {
-      debouncer.cancel()
+      if (mergedOptions.onUnmount) {
+        mergedOptions.onUnmount(debouncer)
+      } else {
+        debouncer.cancel()
+      }
     }
-  }, [debouncer])
+  }, [])
+  /* eslint-enable react-hooks/exhaustive-deps */
 
-  const state = useStore(debouncer.store, selector)
+  const state = useStore(debouncer.store, selector, { equal: shallow })
 
   return useMemo(
     () =>

package/src/queuer/useQueuedState.ts

@@ -1,6 +1,6 @@
 import { useQueuer } from './useQueuer'
-import type { PreactQueuer } from './useQueuer'
-import type { Queuer, QueuerOptions, QueuerState } from '@tanstack/pacer/queuer'
+import type { PreactQueuer, PreactQueuerOptions } from './useQueuer'
+import type { Queuer, QueuerState } from '@tanstack/pacer/queuer'
 
 /**
  * A Preact hook that creates a queuer with managed state, combining Preact's useState with queuing functionality.
@@ -124,7 +124,7 @@ export function useQueuedState<
   >,
 >(
   fn: (item: TValue) => void,
-  options: QueuerOptions<TValue> = {},
+  options: PreactQueuerOptions<TValue, TSelected> = {},
   selector?: (state: QueuerState<TValue>) => TSelected,
 ): [Array<TValue>, Queuer<TValue>['addItem'], PreactQueuer<TValue, TSelected>] {
   const queue = useQueuer(fn, options, selector)

package/src/queuer/useQueuedValue.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'preact/hooks'
 import { useQueuedState } from './useQueuedState'
-import type { PreactQueuer } from './useQueuer'
-import type { QueuerOptions, QueuerState } from '@tanstack/pacer/queuer'
+import type { PreactQueuer, PreactQueuerOptions } from './useQueuer'
+import type { QueuerState } from '@tanstack/pacer/queuer'
 
 /**
  * A Preact hook that creates a queued value that processes state changes in order with an optional delay.
@@ -108,7 +108,7 @@ export function useQueuedValue<
   >,
 >(
   initialValue: TValue,
-  options: QueuerOptions<TValue> = {},
+  options: PreactQueuerOptions<TValue, TSelected> = {},
   selector?: (state: QueuerState<TValue>) => TSelected,
 ): [TValue, PreactQueuer<TValue, TSelected>] {
   const [value, setValue] = useState<TValue>(initialValue)

package/src/queuer/useQueuer.ts

@@ -1,11 +1,22 @@
-import { useMemo, useState } from 'preact/hooks'
+import { useEffect, useMemo, useState } from 'preact/hooks'
 import { Queuer } from '@tanstack/pacer/queuer'
-import { useStore } from '@tanstack/preact-store'
+import { shallow, useStore } from '@tanstack/preact-store'
 import { useDefaultPacerOptions } from '../provider/PacerProvider'
 import type { Store } from '@tanstack/preact-store'
 import type { QueuerOptions, QueuerState } from '@tanstack/pacer/queuer'
 import type { ComponentChildren } from 'preact'
 
+export interface PreactQueuerOptions<
+  TValue,
+  TSelected = {},
+> extends QueuerOptions<TValue> {
+  /**
+   * Optional callback invoked when the component unmounts. Receives the queuer instance.
+   * When provided, replaces the default cleanup (stop); use it to call flush(), flushAsBatch(), stop(), add logging, etc.
+   */
+  onUnmount?: (queuer: PreactQueuer<TValue, TSelected>) => void
+}
+
 export interface PreactQueuer<TValue, TSelected = {}> extends Omit<
   Queuer<TValue>,
   'store'
@@ -93,6 +104,19 @@ export interface PreactQueuer<TValue, TSelected = {}> extends Omit<
  * - `size`: Number of items currently in the queue
  * - `status`: Current processing status ('idle' | 'running' | 'stopped')
  *
+ * ## Unmount behavior
+ *
+ * By default, the hook stops the queuer when the component unmounts.
+ * Use the `onUnmount` option to customize this. For example, to flush pending items instead:
+ *
+ * ```tsx
+ * const queue = useQueuer(fn, {
+ *   started: true,
+ *   wait: 1000,
+ *   onUnmount: (q) => q.flush()
+ * });
+ * ```
+ *
  * @example
  * ```tsx
  * // Default behavior - no reactive state subscriptions
@@ -169,13 +193,13 @@ export interface PreactQueuer<TValue, TSelected = {}> extends Omit<
  */
 export function useQueuer<TValue, TSelected = {}>(
   fn: (item: TValue) => void,
-  options: QueuerOptions<TValue> = {},
+  options: PreactQueuerOptions<TValue, TSelected> = {},
   selector: (state: QueuerState<TValue>) => TSelected = () => ({}) as TSelected,
 ): PreactQueuer<TValue, TSelected> {
   const mergedOptions = {
     ...useDefaultPacerOptions().queuer,
     ...options,
-  } as QueuerOptions<TValue>
+  } as PreactQueuerOptions<TValue, TSelected>
 
   const [queuer] = useState(() => {
     const queuerInstance = new Queuer<TValue>(
@@ -187,7 +211,9 @@ export function useQueuer<TValue, TSelected = {}>(
       selector: (state: QueuerState<TValue>) => TSelected
       children: ((state: TSelected) => ComponentChildren) | ComponentChildren
     }) {
-      const selected = useStore(queuerInstance.store, props.selector)
+      const selected = useStore(queuerInstance.store, props.selector, {
+        equal: shallow,
+      })
 
       return typeof props.children === 'function'
         ? props.children(selected)
@@ -200,7 +226,19 @@ export function useQueuer<TValue, TSelected = {}>(
   queuer.fn = fn
   queuer.setOptions(mergedOptions)
 
-  const state = useStore(queuer.store, selector)
+  /* eslint-disable react-hooks/exhaustive-deps -- cleanup only; runs on unmount */
+  useEffect(() => {
+    return () => {
+      if (mergedOptions.onUnmount) {
+        mergedOptions.onUnmount(queuer)
+      } else {
+        queuer.stop()
+      }
+    }
+  }, [])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  const state = useStore(queuer.store, selector, { equal: shallow })
 
   return useMemo(
     () =>

package/src/rate-limiter/useRateLimitedCallback.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'preact/hooks'
 import { useRateLimiter } from './useRateLimiter'
 import type { AnyFunction } from '@tanstack/pacer/types'
-import type { RateLimiterOptions } from '@tanstack/pacer/rate-limiter'
+import type { PreactRateLimiterOptions } from './useRateLimiter'
 
 /**
  * A Preact hook that creates a rate-limited version of a callback function.
@@ -58,7 +58,7 @@ import type { RateLimiterOptions } from '@tanstack/pacer/rate-limiter'
  */
 export function useRateLimitedCallback<TFn extends AnyFunction>(
   fn: TFn,
-  options: RateLimiterOptions<TFn>,
+  options: PreactRateLimiterOptions<TFn, {}>,
 ): (...args: Parameters<TFn>) => boolean {
   const rateLimitedFn = useRateLimiter(fn, options).maybeExecute
   return useCallback(

package/src/rate-limiter/useRateLimitedState.ts

@@ -1,11 +1,11 @@
 import { useState } from 'preact/hooks'
 import { useRateLimiter } from './useRateLimiter'
-import type { Dispatch, StateUpdater } from 'preact/hooks'
-import type { PreactRateLimiter } from './useRateLimiter'
 import type {
-  RateLimiterOptions,
-  RateLimiterState,
-} from '@tanstack/pacer/rate-limiter'
+  PreactRateLimiter,
+  PreactRateLimiterOptions,
+} from './useRateLimiter'
+import type { Dispatch, StateUpdater } from 'preact/hooks'
+import type { RateLimiterState } from '@tanstack/pacer/rate-limiter'
 
 /**
  * A Preact hook that creates a rate-limited state value that enforces a hard limit on state updates within a time window.
@@ -107,7 +107,7 @@ import type {
  */
 export function useRateLimitedState<TValue, TSelected = RateLimiterState>(
   value: TValue,
-  options: RateLimiterOptions<Dispatch<StateUpdater<TValue>>>,
+  options: PreactRateLimiterOptions<Dispatch<StateUpdater<TValue>>, TSelected>,
   selector?: (state: RateLimiterState) => TSelected,
 ): [
   TValue,