@octanejs/tanstack-pacer 0.0.5

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

@@ -0,0 +1,120 @@
+import { useEffect, useMemo, useState } from 'octane';
+import { AsyncRateLimiter } from '@tanstack/pacer/async-rate-limiter';
+import { shallow } from '@octanejs/tanstack-store';
+import { useDefaultPacerOptions } from '../provider/context';
+import { useSelectorSlot } from '../internal';
+import type { Store } from '@octanejs/tanstack-store';
+import type {
+	AsyncRateLimiterOptions,
+	AsyncRateLimiterState,
+} from '@tanstack/pacer/async-rate-limiter';
+import type { AnyAsyncFunction } from '@tanstack/pacer/types';
+
+const subscribeSlot = Symbol.for('@octanejs/tanstack-pacer:useAsyncRateLimiter:Subscribe');
+const stateSlot = Symbol.for('@octanejs/tanstack-pacer:useAsyncRateLimiter:state');
+
+export interface ReactAsyncRateLimiterOptions<
+	TFn extends AnyAsyncFunction,
+	TSelected = {},
+> extends AsyncRateLimiterOptions<TFn> {
+	/**
+	 * Custom unmount behavior. Defaults to aborting in-flight executions.
+	 */
+	onUnmount?: (rateLimiter: ReactAsyncRateLimiter<TFn, TSelected>) => void;
+}
+
+export interface ReactAsyncRateLimiter<TFn extends AnyAsyncFunction, TSelected = {}> extends Omit<
+	AsyncRateLimiter<TFn>,
+	'store'
+> {
+	/**
+	 * Render-prop component subscribing to a slice of the rate limiter's state.
+	 */
+	Subscribe: <TSelected>(props: {
+		selector: (state: AsyncRateLimiterState<TFn>) => TSelected;
+		children: ((state: TSelected) => unknown) | unknown;
+	}) => unknown;
+	/**
+	 * Reactive state selected by the hook's `selector` (empty object without one).
+	 */
+	readonly state: Readonly<TSelected>;
+	/**
+	 * The underlying TanStack Store instance.
+	 */
+	readonly store: Store<Readonly<AsyncRateLimiterState<TFn>>>;
+}
+
+/**
+ * An Octane hook that creates and manages an AsyncRateLimiter instance.
+ *
+ * **By default there are no reactive state subscriptions** — opt in by
+ * providing a `selector`; only then does the component re-render when the
+ * selected state values change.
+ *
+ * @example
+ * ```tsx
+ * const rateLimiter = useAsyncRateLimiter(fetchData, {
+ *   limit: 5,
+ *   window: 60000,
+ * });
+ * ```
+ */
+export function useAsyncRateLimiter<TFn extends AnyAsyncFunction, TSelected = {}>(
+	fn: TFn,
+	options: ReactAsyncRateLimiterOptions<TFn, TSelected>,
+	selector: (state: AsyncRateLimiterState<TFn>) => TSelected = () => ({}) as TSelected,
+): ReactAsyncRateLimiter<TFn, TSelected> {
+	const mergedOptions = {
+		...useDefaultPacerOptions().asyncRateLimiter,
+		...options,
+	} as ReactAsyncRateLimiterOptions<TFn, TSelected>;
+	const [asyncRateLimiter] = useState(() => {
+		const asyncRateLimiterInstance = new AsyncRateLimiter<TFn>(
+			fn,
+			mergedOptions,
+		) as unknown as ReactAsyncRateLimiter<TFn, TSelected>;
+
+		asyncRateLimiterInstance.Subscribe = function Subscribe<TSelected>(props: {
+			selector: (state: AsyncRateLimiterState<TFn>) => TSelected;
+			children: ((state: TSelected) => unknown) | unknown;
+		}) {
+			const selected = useSelectorSlot(
+				asyncRateLimiterInstance.store,
+				props.selector,
+				{ compare: shallow },
+				subscribeSlot,
+			);
+
+			return typeof props.children === 'function'
+				? (props.children as (state: TSelected) => unknown)(selected)
+				: props.children;
+		};
+
+		return asyncRateLimiterInstance;
+	});
+
+	asyncRateLimiter.fn = fn;
+	asyncRateLimiter.setOptions(mergedOptions);
+
+	const state = useSelectorSlot(asyncRateLimiter.store, selector, { compare: shallow }, stateSlot);
+
+	// Unmount cleanup only; empty deps keep teardown stable (as upstream).
+	useEffect(() => {
+		return () => {
+			if (mergedOptions.onUnmount) {
+				mergedOptions.onUnmount(asyncRateLimiter);
+			} else {
+				asyncRateLimiter.abort();
+			}
+		};
+	}, []);
+
+	return useMemo(
+		() =>
+			({
+				...asyncRateLimiter,
+				state,
+			}) as ReactAsyncRateLimiter<TFn, TSelected>, // omit `store` in favor of `state`
+		[asyncRateLimiter, state],
+	);
+}

package/src/async-retryer/index.ts

@@ -0,0 +1 @@
+export * from '@tanstack/pacer/async-retryer';

package/src/async-throttler/index.ts

@@ -0,0 +1,5 @@
+// re-export everything from the core pacer package, BUT ONLY from the async-throttler module
+export * from '@tanstack/pacer/async-throttler';
+
+export * from './useAsyncThrottler';
+export * from './useAsyncThrottledCallback';

package/src/async-throttler/useAsyncThrottledCallback.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'octane';
+import { useAsyncThrottler } from './useAsyncThrottler';
+import type { ReactAsyncThrottlerOptions } from './useAsyncThrottler';
+import type { AnyAsyncFunction } from '@tanstack/pacer/types';
+
+/**
+ * An Octane hook that creates a throttled version of an async callback
+ * function.
+ *
+ * @example
+ * ```tsx
+ * const throttledSave = useAsyncThrottledCallback(saveApi, { wait: 1000 });
+ * ```
+ */
+export function useAsyncThrottledCallback<TFn extends AnyAsyncFunction>(
+	fn: TFn,
+	options: ReactAsyncThrottlerOptions<TFn, {}>,
+): (...args: Parameters<TFn>) => Promise<ReturnType<TFn>> {
+	const asyncThrottledFn = useAsyncThrottler(fn, options).maybeExecute;
+	return useCallback(
+		(...args) => asyncThrottledFn(...args) as Promise<ReturnType<TFn>>,
+		[asyncThrottledFn],
+	);
+}

package/src/async-throttler/useAsyncThrottler.ts

@@ -0,0 +1,116 @@
+import { useEffect, useMemo, useState } from 'octane';
+import { AsyncThrottler } from '@tanstack/pacer/async-throttler';
+import { shallow } from '@octanejs/tanstack-store';
+import { useDefaultPacerOptions } from '../provider/context';
+import { useSelectorSlot } from '../internal';
+import type { Store } from '@octanejs/tanstack-store';
+import type { AsyncThrottlerOptions, AsyncThrottlerState } from '@tanstack/pacer/async-throttler';
+import type { AnyAsyncFunction } from '@tanstack/pacer/types';
+
+const subscribeSlot = Symbol.for('@octanejs/tanstack-pacer:useAsyncThrottler:Subscribe');
+const stateSlot = Symbol.for('@octanejs/tanstack-pacer:useAsyncThrottler:state');
+
+export interface ReactAsyncThrottlerOptions<
+	TFn extends AnyAsyncFunction,
+	TSelected = {},
+> extends AsyncThrottlerOptions<TFn> {
+	/**
+	 * Custom unmount behavior. Defaults to cancelling pending executions and
+	 * aborting in-flight ones.
+	 */
+	onUnmount?: (throttler: ReactAsyncThrottler<TFn, TSelected>) => void;
+}
+
+export interface ReactAsyncThrottler<TFn extends AnyAsyncFunction, TSelected = {}> extends Omit<
+	AsyncThrottler<TFn>,
+	'store'
+> {
+	/**
+	 * Render-prop component subscribing to a slice of the throttler's state.
+	 */
+	Subscribe: <TSelected>(props: {
+		selector: (state: AsyncThrottlerState<TFn>) => TSelected;
+		children: ((state: TSelected) => unknown) | unknown;
+	}) => unknown;
+	/**
+	 * Reactive state selected by the hook's `selector` (empty object without one).
+	 */
+	readonly state: Readonly<TSelected>;
+	/**
+	 * The underlying TanStack Store instance.
+	 */
+	readonly store: Store<Readonly<AsyncThrottlerState<TFn>>>;
+}
+
+/**
+ * An Octane hook that creates and manages an AsyncThrottler instance.
+ *
+ * **By default there are no reactive state subscriptions** — opt in by
+ * providing a `selector`; only then does the component re-render when the
+ * selected state values change.
+ *
+ * @example
+ * ```tsx
+ * const throttler = useAsyncThrottler(async (v) => save(v), { wait: 1000 });
+ * ```
+ */
+export function useAsyncThrottler<TFn extends AnyAsyncFunction, TSelected = {}>(
+	fn: TFn,
+	options: ReactAsyncThrottlerOptions<TFn, TSelected>,
+	selector: (state: AsyncThrottlerState<TFn>) => TSelected = () => ({}) as TSelected,
+): ReactAsyncThrottler<TFn, TSelected> {
+	const mergedOptions = {
+		...useDefaultPacerOptions().asyncThrottler,
+		...options,
+	} as ReactAsyncThrottlerOptions<TFn, TSelected>;
+	const [asyncThrottler] = useState(() => {
+		const asyncThrottlerInstance = new AsyncThrottler<TFn>(
+			fn,
+			mergedOptions,
+		) as unknown as ReactAsyncThrottler<TFn, TSelected>;
+
+		asyncThrottlerInstance.Subscribe = function Subscribe<TSelected>(props: {
+			selector: (state: AsyncThrottlerState<TFn>) => TSelected;
+			children: ((state: TSelected) => unknown) | unknown;
+		}) {
+			const selected = useSelectorSlot(
+				asyncThrottlerInstance.store,
+				props.selector,
+				{ compare: shallow },
+				subscribeSlot,
+			);
+
+			return typeof props.children === 'function'
+				? (props.children as (state: TSelected) => unknown)(selected)
+				: props.children;
+		};
+
+		return asyncThrottlerInstance;
+	});
+
+	asyncThrottler.fn = fn;
+	asyncThrottler.setOptions(mergedOptions);
+
+	const state = useSelectorSlot(asyncThrottler.store, selector, { compare: shallow }, stateSlot);
+
+	// Unmount cleanup only; empty deps keep teardown stable (as upstream).
+	useEffect(() => {
+		return () => {
+			if (mergedOptions.onUnmount) {
+				mergedOptions.onUnmount(asyncThrottler);
+			} else {
+				asyncThrottler.cancel();
+				asyncThrottler.abort();
+			}
+		};
+	}, []);
+
+	return useMemo(
+		() =>
+			({
+				...asyncThrottler,
+				state,
+			}) as ReactAsyncThrottler<TFn, TSelected>, // omit `store` in favor of `state`
+		[asyncThrottler, state],
+	);
+}

package/src/batcher/index.ts

@@ -0,0 +1,5 @@
+// re-export everything from the core pacer package, BUT ONLY from the batcher module
+export * from '@tanstack/pacer/batcher';
+
+export * from './useBatcher';
+export * from './useBatchedCallback';

package/src/batcher/useBatchedCallback.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'octane';
+import { useBatcher } from './useBatcher';
+import type { ReactBatcherOptions } from './useBatcher';
+
+/**
+ * An Octane hook that creates a batched version of a callback function.
+ * Calling the returned function adds the item to the batch.
+ *
+ * @example
+ * ```tsx
+ * const addToBatch = useBatchedCallback(processBatch, { maxSize: 10 });
+ * ```
+ */
+export function useBatchedCallback<TValue>(
+	fn: (items: Array<TValue>) => void,
+	options: ReactBatcherOptions<TValue, {}>,
+): (item: TValue) => void {
+	const batchedFn = useBatcher(fn, options).addItem;
+	return useCallback((item: TValue) => batchedFn(item), [batchedFn]);
+}

package/src/batcher/useBatcher.ts

@@ -0,0 +1,108 @@
+import { useEffect, useMemo, useState } from 'octane';
+import { Batcher } from '@tanstack/pacer/batcher';
+import { shallow } from '@octanejs/tanstack-store';
+import { useDefaultPacerOptions } from '../provider/context';
+import { useSelectorSlot } from '../internal';
+import type { Store } from '@octanejs/tanstack-store';
+import type { BatcherOptions, BatcherState } from '@tanstack/pacer/batcher';
+
+const subscribeSlot = Symbol.for('@octanejs/tanstack-pacer:useBatcher:Subscribe');
+const stateSlot = Symbol.for('@octanejs/tanstack-pacer:useBatcher:state');
+
+export interface ReactBatcherOptions<TValue, TSelected = {}> extends BatcherOptions<TValue> {
+	/**
+	 * Custom unmount behavior. Defaults to cancelling any pending batch.
+	 */
+	onUnmount?: (batcher: ReactBatcher<TValue, TSelected>) => void;
+}
+
+export interface ReactBatcher<TValue, TSelected = {}> extends Omit<Batcher<TValue>, 'store'> {
+	/**
+	 * Render-prop component subscribing to a slice of the batcher's state.
+	 */
+	Subscribe: <TSelected>(props: {
+		selector: (state: BatcherState<TValue>) => TSelected;
+		children: ((state: TSelected) => unknown) | unknown;
+	}) => unknown;
+	/**
+	 * Reactive state selected by the hook's `selector` (empty object without one).
+	 */
+	readonly state: Readonly<TSelected>;
+	/**
+	 * The underlying TanStack Store instance.
+	 */
+	readonly store: Store<Readonly<BatcherState<TValue>>>;
+}
+
+/**
+ * An Octane hook that creates and manages a Batcher instance — collects items
+ * and processes them together by size or time threshold.
+ *
+ * **By default there are no reactive state subscriptions** — opt in by
+ * providing a `selector`; only then does the component re-render when the
+ * selected state values change.
+ *
+ * @example
+ * ```tsx
+ * const batcher = useBatcher(processBatch, { maxSize: 10, wait: 2000 });
+ * ```
+ */
+export function useBatcher<TValue, TSelected = {}>(
+	fn: (items: Array<TValue>) => void,
+	options: ReactBatcherOptions<TValue, TSelected> = {},
+	selector: (state: BatcherState<TValue>) => TSelected = () => ({}) as TSelected,
+): ReactBatcher<TValue, TSelected> {
+	const mergedOptions = {
+		...useDefaultPacerOptions().batcher,
+		...options,
+	} as ReactBatcherOptions<TValue, TSelected>;
+	const [batcher] = useState(() => {
+		const batcherInstance = new Batcher<TValue>(fn, mergedOptions) as unknown as ReactBatcher<
+			TValue,
+			TSelected
+		>;
+
+		batcherInstance.Subscribe = function Subscribe<TSelected>(props: {
+			selector: (state: BatcherState<TValue>) => TSelected;
+			children: ((state: TSelected) => unknown) | unknown;
+		}) {
+			const selected = useSelectorSlot(
+				batcherInstance.store,
+				props.selector,
+				{ compare: shallow },
+				subscribeSlot,
+			);
+
+			return typeof props.children === 'function'
+				? (props.children as (state: TSelected) => unknown)(selected)
+				: props.children;
+		};
+
+		return batcherInstance;
+	});
+
+	batcher.fn = fn;
+	batcher.setOptions(mergedOptions);
+
+	// Unmount cleanup only; empty deps keep teardown stable (as upstream).
+	useEffect(() => {
+		return () => {
+			if (mergedOptions.onUnmount) {
+				mergedOptions.onUnmount(batcher);
+			} else {
+				batcher.cancel();
+			}
+		};
+	}, []);
+
+	const state = useSelectorSlot(batcher.store, selector, { compare: shallow }, stateSlot);
+
+	return useMemo(
+		() =>
+			({
+				...batcher,
+				state,
+			}) as ReactBatcher<TValue, TSelected>, // omit `store` in favor of `state`
+		[batcher, state],
+	);
+}

package/src/debouncer/index.ts

@@ -0,0 +1,7 @@
+// re-export everything from the core pacer package, BUT ONLY from the debouncer module
+export * from '@tanstack/pacer/debouncer';
+
+export * from './useDebouncedCallback';
+export * from './useDebouncedState';
+export * from './useDebouncedValue';
+export * from './useDebouncer';

package/src/debouncer/useDebouncedCallback.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'octane';
+import { useDebouncer } from './useDebouncer';
+import type { ReactDebouncerOptions } from './useDebouncer';
+import type { AnyFunction } from '@tanstack/pacer/types';
+
+/**
+ * An Octane hook that creates a debounced version of a callback function.
+ * The returned function delays invoking the callback until after the
+ * specified wait time has elapsed since its last invocation.
+ *
+ * @example
+ * ```tsx
+ * const debouncedSearch = useDebouncedCallback(performSearch, { wait: 500 });
+ * ```
+ */
+export function useDebouncedCallback<TFn extends AnyFunction>(
+	fn: TFn,
+	options: ReactDebouncerOptions<TFn, {}>,
+): (...args: Parameters<TFn>) => void {
+	const debouncedFn = useDebouncer(fn, options).maybeExecute;
+	return useCallback((...args) => debouncedFn(...args), [debouncedFn]);
+}

package/src/debouncer/useDebouncedState.ts

@@ -0,0 +1,37 @@
+import { useState } from 'octane';
+import { useDebouncer } from './useDebouncer';
+import type { ReactDebouncer, ReactDebouncerOptions } from './useDebouncer';
+import type { Dispatch, SetStateAction } from '../internal';
+import type { DebouncerState } from '@tanstack/pacer/debouncer';
+
+/**
+ * An Octane hook that creates a debounced state value, combining `useState`
+ * with debouncing functionality. Returns a tuple of the current debounced
+ * value, a debounced updater, and the debouncer instance.
+ *
+ * **By default there are no reactive state subscriptions** — opt in by
+ * providing a `selector` (see {@link useDebouncer}).
+ *
+ * @example
+ * ```tsx
+ * const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
+ *   wait: 500,
+ * });
+ * ```
+ */
+export function useDebouncedState<
+	TValue,
+	TSelected = DebouncerState<Dispatch<SetStateAction<TValue>>>,
+>(
+	value: TValue,
+	options: ReactDebouncerOptions<Dispatch<SetStateAction<TValue>>, TSelected>,
+	selector?: (state: DebouncerState<Dispatch<SetStateAction<TValue>>>) => TSelected,
+): [
+	TValue,
+	Dispatch<SetStateAction<TValue>>,
+	ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>,
+] {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+	const debouncer = useDebouncer(setDebouncedValue, options, selector);
+	return [debouncedValue, debouncer.maybeExecute, debouncer];
+}

package/src/debouncer/useDebouncedValue.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'octane';
+import { useDebouncedState } from './useDebouncedState';
+import type { ReactDebouncer, ReactDebouncerOptions } from './useDebouncer';
+import type { Dispatch, SetStateAction } from '../internal';
+import type { DebouncerState } from '@tanstack/pacer/debouncer';
+
+/**
+ * An Octane hook that creates a debounced value that updates only after a
+ * specified delay. Unlike `useDebouncedState`, this hook automatically tracks
+ * changes to the input value and updates the debounced value accordingly.
+ *
+ * **By default there are no reactive state subscriptions** — opt in by
+ * providing a `selector` (see {@link useDebouncer}).
+ *
+ * @example
+ * ```tsx
+ * const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
+ *   wait: 500, // Wait 500ms after last change
+ * });
+ * ```
+ */
+export function useDebouncedValue<
+	TValue,
+	TSelected = DebouncerState<Dispatch<SetStateAction<TValue>>>,
+>(
+	value: TValue,
+	options: ReactDebouncerOptions<Dispatch<SetStateAction<TValue>>, TSelected>,
+	selector?: (state: DebouncerState<Dispatch<SetStateAction<TValue>>>) => TSelected,
+): [TValue, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>] {
+	const [debouncedValue, setDebouncedValue, debouncer] = useDebouncedState(
+		value,
+		options,
+		selector,
+	);
+
+	useEffect(() => {
+		setDebouncedValue(value);
+	}, [value, setDebouncedValue]);
+
+	return [debouncedValue, debouncer];
+}

package/src/debouncer/useDebouncer.ts

@@ -0,0 +1,122 @@
+import { useEffect, useMemo, useState } from 'octane';
+import { Debouncer } from '@tanstack/pacer/debouncer';
+import { shallow } from '@octanejs/tanstack-store';
+import { useDefaultPacerOptions } from '../provider/context';
+import { useSelectorSlot } from '../internal';
+import type { Store } from '@octanejs/tanstack-store';
+import type { DebouncerOptions, DebouncerState } from '@tanstack/pacer/debouncer';
+import type { AnyFunction } from '@tanstack/pacer/types';
+
+const subscribeSlot = Symbol.for('@octanejs/tanstack-pacer:useDebouncer:Subscribe');
+const stateSlot = Symbol.for('@octanejs/tanstack-pacer:useDebouncer:state');
+
+export interface ReactDebouncerOptions<
+	TFn extends AnyFunction,
+	TSelected = {},
+> extends DebouncerOptions<TFn> {
+	/**
+	 * Custom unmount behavior. Defaults to cancelling any pending execution.
+	 */
+	onUnmount?: (debouncer: ReactDebouncer<TFn, TSelected>) => void;
+}
+
+export interface ReactDebouncer<TFn extends AnyFunction, TSelected = {}> extends Omit<
+	Debouncer<TFn>,
+	'store'
+> {
+	/**
+	 * Render-prop component subscribing to a slice of the debouncer's state.
+	 */
+	Subscribe: <TSelected>(props: {
+		selector: (state: DebouncerState<TFn>) => TSelected;
+		children: ((state: TSelected) => unknown) | unknown;
+	}) => unknown;
+	/**
+	 * Reactive state selected by the hook's `selector` (empty object without one).
+	 */
+	readonly state: Readonly<TSelected>;
+	/**
+	 * The underlying TanStack Store instance.
+	 */
+	readonly store: Store<Readonly<DebouncerState<TFn>>>;
+}
+
+/**
+ * An Octane hook that creates and manages a Debouncer instance.
+ *
+ * The debouncer delays function execution until after a specified wait time
+ * has elapsed since the last call.
+ *
+ * ## State Management and Selector
+ *
+ * Uses TanStack Store for reactive state management. **By default there are no
+ * reactive state subscriptions** — opt in by providing a `selector`; only then
+ * does the component re-render when the selected state values change.
+ *
+ * @example
+ * ```tsx
+ * // Opt-in to re-render when isPending changes
+ * const debouncer = useDebouncer(setValue, { wait: 500 }, (state) => ({
+ *   isPending: state.isPending,
+ * }));
+ * ```
+ */
+export function useDebouncer<TFn extends AnyFunction, TSelected = {}>(
+	fn: TFn,
+	options: ReactDebouncerOptions<TFn, TSelected>,
+	selector: (state: DebouncerState<TFn>) => TSelected = () => ({}) as TSelected,
+): ReactDebouncer<TFn, TSelected> {
+	const mergedOptions = {
+		...useDefaultPacerOptions().debouncer,
+		...options,
+	} as ReactDebouncerOptions<TFn, TSelected>;
+	const [debouncer] = useState(() => {
+		const debouncerInstance = new Debouncer(fn, mergedOptions) as unknown as ReactDebouncer<
+			TFn,
+			TSelected
+		>;
+
+		debouncerInstance.Subscribe = function Subscribe<TSelected>(props: {
+			selector: (state: DebouncerState<TFn>) => TSelected;
+			children: ((state: TSelected) => unknown) | unknown;
+		}) {
+			const selected = useSelectorSlot(
+				debouncerInstance.store,
+				props.selector,
+				{ compare: shallow },
+				subscribeSlot,
+			);
+
+			return typeof props.children === 'function'
+				? (props.children as (state: TSelected) => unknown)(selected)
+				: props.children;
+		};
+
+		return debouncerInstance;
+	});
+
+	debouncer.fn = fn;
+	debouncer.setOptions(mergedOptions);
+
+	// Unmount cleanup only; empty deps keep teardown stable (as upstream).
+	useEffect(() => {
+		return () => {
+			if (mergedOptions.onUnmount) {
+				mergedOptions.onUnmount(debouncer);
+			} else {
+				debouncer.cancel();
+			}
+		};
+	}, []);
+
+	const state = useSelectorSlot(debouncer.store, selector, { compare: shallow }, stateSlot);
+
+	return useMemo(
+		() =>
+			({
+				...debouncer,
+				state,
+			}) as ReactDebouncer<TFn, TSelected>, // omit `store` in favor of `state`
+		[debouncer, state],
+	);
+}