@aweebit/react-essentials 0.8.0 → 0.9.0

package/LICENSE

@@ -1,8 +1,6 @@
 MIT License
 
 Copyright (c) 2025 Wee Bit
-Portions Copyright (c) 2020 Peter Juras
-Portions Copyright (c) 2020 Julien CARON
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -10,7 +10,6 @@
 ### Functions
 
 - [useEventListener()](#useeventlistener)
-- [useForceUpdate()](#useforceupdate)
 - [useReducerWithDeps()](#usereducerwithdeps)
 - [useStateWithDeps()](#usestatewithdeps)
 - [createSafeContext()](#createsafecontext)
@@ -18,12 +17,6 @@
 ### Types
 
 - [UseEventListener](#useeventlistener-1)
-- [UseEventListenerWithImplicitWindowTarget](#useeventlistenerwithimplicitwindowtarget)
-- [UseEventListenerWithExplicitTarget](#useeventlistenerwithexplicittarget)
-- [UseEventListenerWithAnyExplicitTarget](#useeventlistenerwithanyexplicittarget)
-- [UseEventListenerWithImplicitWindowTargetArgs](#useeventlistenerwithimplicitwindowtargetargs)
-- [UseEventListenerWithExplicitTargetArgs](#useeventlistenerwithexplicittargetargs)
-- [RestrictedContext](#restrictedcontext)
 - [SafeContext](#safecontext)
 
 ## useEventListener
@@ -32,7 +25,7 @@
 const useEventListener: UseEventListener;
 ```
 
-Defined in: [hooks/useEventListener.ts:133](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/hooks/useEventListener.ts#L133)
+Defined in: [hooks/useEventListener.ts:135](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/hooks/useEventListener.ts#L135)
 
 Adds `handler` as a listener for the event `eventName` of `target` with the
 provided `options` applied
@@ -73,122 +66,6 @@ useEventListener(buttonRef, 'click', () => console.log('click'));
 
 ---
 
-## useForceUpdate()
-
-```ts
-function useForceUpdate(callback?): [() => void, bigint];
-```
-
-Defined in: [hooks/useForceUpdate.ts:81](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/hooks/useForceUpdate.ts#L81)
-
-Enables you to imperatively trigger re-rendering of components
-
-This hook is designed in the most general way possible in order to cover all
-imaginable use cases.
-
-### Example
-
-Sometimes, React's immutability constraints mean too much unnecessary copying
-of data when new data arrives at a high frequency. In such cases, it might be
-desirable to ignore the constraints by embracing imperative patterns.
-Here is an example of a scenario where that can make sense:
-
-```tsx
-type SensorData = { timestamp: number; value: number };
-const sensorDataRef = useRef<SensorData[]>([]);
-const mostRecentSensorDataTimestampRef = useRef<number>(0);
-
-const [forceUpdate, updateCount] = useForceUpdate();
-// Limiting the frequency of forced re-renders with some throttle function:
-const throttledForceUpdateRef = useRef(throttle(forceUpdate));
-
-useEffect(() => {
-  return sensorDataObservable.subscribe((data: SensorData) => {
-    // Imagine new sensor data arrives every 1 millisecond. If we were following
-    // React's immutability rules by creating a new array every time, the data
-    // that's already there would have to be copied many times before the new
-    // data would even get a chance to be reflected in the UI for the first time
-    // because it typically takes much longer than 1 millisecond for a new frame
-    // to be displayed. To prevent the waste of computational resources, we just
-    // mutate the existing array every time instead:
-    sensorDataRef.current.push(data);
-    if (data.timestamp > mostRecentSensorDataTimestampRef.current) {
-      mostRecentSensorDataTimestampRef.current = data.timestamp;
-    }
-    throttledForceUpdateRef.current();
-  });
-}, []);
-
-const [timeWindow, setTimeWindow] = useState(1000);
-const selectedSensorData = useMemo(
-  () => {
-    // Keep this line if you don't want to disable the
-    // react-hooks/exhaustive-deps ESLint rule:
-    updateCount;
-    const threshold = mostRecentSensorDataTimestampRef.current - timeWindow;
-    return sensorDataRef.current.filter(
-      ({ timestamp }) => timestamp >= threshold,
-    );
-  },
-  // sensorDataRef.current always references the same array, so listing it as a
-  // dependency is pointless. Instead, updateCount should be used:
-  [updateCount, timeWindow],
-);
-```
-
-### Parameters
-
-<table>
-<thead>
-<tr>
-<th>Parameter</th>
-<th>Type</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>
-
-`callback?`
-
-</td>
-<td>
-
-() => `void`
-
-</td>
-<td>
-
-An optional callback function to call during renders that
-were triggered with `forceUpdate()`
-
-Can be used for conditionally calling state setters when state needs to be
-reset. That is legal and better than using effects (see
-[You Might Not Need an Effect \> Adjusting some state when a prop changes](https://react.dev/learn/-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes)),
-but can often be avoided by using [`useStateWithDeps`](#usestatewithdeps) or
-[`useReducerWithDeps`](#usereducerwithdeps).
-
-Important: the callback function is called once per render, not once per
-`forceUpdate` call! If React batches `forceUpdate` calls, then it will only
-be called once.
-
-</td>
-</tr>
-</tbody>
-</table>
-
-### Returns
-
-\[() => `void`, `bigint`\]
-
-An array with the following two elements:
-
-1. A `forceUpdate` function that triggers a re-render
-2. The number of times `forceUpdate` has been called so far
-
----
-
 ## useReducerWithDeps()
 
 ```ts
@@ -199,11 +76,18 @@ function useReducerWithDeps<S, A>(
 ): [S, ActionDispatch<A>];
 ```
 
-Defined in: [hooks/useReducerWithDeps.ts:52](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/hooks/useReducerWithDeps.ts#L52)
+Defined in: [hooks/useReducerWithDeps.ts:59](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/hooks/useReducerWithDeps.ts#L59)
 
 `useReducer` hook with an additional dependency array `deps` that resets the
 state to `initialState` when dependencies change
 
+This hook is the reducer pattern counterpart of [`useStateWithDeps`](#usestatewithdeps).
+
+Due to React's limitations, a change in dependencies always causes two
+renders when using this hook. The result of the first render is thrown away
+as described in
+[useState > Storing information from previous renders](https://react.dev/reference/react/useState#storing-information-from-previous-renders).
+
 For motivation and examples, see
 https://github.com/facebook/react/issues/33041.
 
@@ -335,11 +219,16 @@ function useStateWithDeps<S>(
 ): [S, Dispatch<SetStateAction<S>>];
 ```
 
-Defined in: [hooks/useStateWithDeps.ts:65](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/hooks/useStateWithDeps.ts#L65)
+Defined in: [hooks/useStateWithDeps.ts:62](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/hooks/useStateWithDeps.ts#L62)
 
 `useState` hook with an additional dependency array `deps` that resets the
 state to `initialState` when dependencies change
 
+Due to React's limitations, a change in dependencies always causes two
+renders when using this hook. The result of the first render is thrown away
+as described in
+[useState > Storing information from previous renders](https://react.dev/reference/react/useState#storing-information-from-previous-renders).
+
 For motivation and more examples, see
 https://github.com/facebook/react/issues/33041.
 
@@ -359,7 +248,7 @@ const activityOptionsByTimeOfDay: {
   evening: ['board games', 'dinner'],
 };
 
-export function Example() {
+function Example() {
   const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>('morning');
 
   const activityOptions = activityOptionsByTimeOfDay[timeOfDay];
@@ -462,7 +351,7 @@ function createSafeContext<T>(): <DisplayName>(
 ) => SafeContext<DisplayName, T>;
 ```
 
-Defined in: [misc/createSafeContext.ts:95](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/misc/createSafeContext.ts#L95)
+Defined in: [misc/createSafeContext.ts:95](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/misc/createSafeContext.ts#L95)
 
 For a given type `T`, returns a function that produces both a context of that
 type and a hook that returns the current context value if one was provided,
@@ -609,15 +498,11 @@ A function that accepts a single string argument `displayName` (e.g.
 
 ```ts
 type UseEventListener = UseEventListenerWithImplicitWindowTarget &
-  UseEventListenerWithExplicitTarget<Window, WindowEventMap> &
-  UseEventListenerWithExplicitTarget<Document, DocumentEventMap> &
-  UseEventListenerWithExplicitTarget<HTMLElement, HTMLElementEventMap> &
-  UseEventListenerWithExplicitTarget<SVGElement, SVGElementEventMap> &
-  UseEventListenerWithExplicitTarget<MathMLElement, MathMLElementEventMap> &
+  UseEventListenerWithExplicitGlobalTarget &
   UseEventListenerWithAnyExplicitTarget;
 ```
 
-Defined in: [hooks/useEventListener.ts:19](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/hooks/useEventListener.ts#L19)
+Defined in: [hooks/useEventListener.ts:12](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/hooks/useEventListener.ts#L12)
 
 The type of [`useEventListener`](#useeventlistener-1)
 
@@ -625,7 +510,7 @@ The type of [`useEventListener`](#useeventlistener-1)
 
 [`useEventListener`](#useeventlistener-1),
 [`UseEventListenerWithImplicitWindowTarget`](#useeventlistenerwithimplicitwindowtarget),
-[`UseEventListenerWithExplicitTarget`](#useeventlistenerwithexplicittarget),
+[`UseEventListenerWithExplicitGlobalTarget`](#useeventlistenerwithexplicitglobaltarget),
 [`UseEventListenerWithAnyExplicitTarget`](#useeventlistenerwithanyexplicittarget)
 
 ---
@@ -636,7 +521,7 @@ The type of [`useEventListener`](#useeventlistener-1)
 type UseEventListenerWithImplicitWindowTarget = <K>(...args) => void;
 ```
 
-Defined in: [hooks/useEventListener.ts:31](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/hooks/useEventListener.ts#L31)
+Defined in: [hooks/useEventListener.ts:21](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/hooks/useEventListener.ts#L21)
 
 ### Type Parameters
 
@@ -693,6 +578,26 @@ Defined in: [hooks/useEventListener.ts:31](https://github.com/aweebit/react-esse
 
 ---
 
+## UseEventListenerWithExplicitGlobalTarget
+
+```ts
+type UseEventListenerWithExplicitGlobalTarget =
+  UseEventListenerWithExplicitTarget<Window, WindowEventMap> &
+    UseEventListenerWithExplicitTarget<Document, DocumentEventMap> &
+    UseEventListenerWithExplicitTarget<HTMLElement, HTMLElementEventMap> &
+    UseEventListenerWithExplicitTarget<SVGElement, SVGElementEventMap> &
+    UseEventListenerWithExplicitTarget<MathMLElement, MathMLElementEventMap>;
+```
+
+Defined in: [hooks/useEventListener.ts:32](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/hooks/useEventListener.ts#L32)
+
+### See
+
+[`useEventListener`](#useeventlistener-1),
+[`UseEventListenerWithExplicitTarget`](#useeventlistenerwithexplicittarget)
+
+---
+
 ## UseEventListenerWithExplicitTarget()
 
 ```ts
@@ -701,7 +606,7 @@ type UseEventListenerWithExplicitTarget<Target, EventMap> = <T, K>(
 ) => void;
 ```
 
-Defined in: [hooks/useEventListener.ts:42](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/hooks/useEventListener.ts#L42)
+Defined in: [hooks/useEventListener.ts:44](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/hooks/useEventListener.ts#L44)
 
 ### Type Parameters
 
@@ -709,7 +614,6 @@ Defined in: [hooks/useEventListener.ts:42](https://github.com/aweebit/react-esse
 <thead>
 <tr>
 <th>Type Parameter</th>
-<th>Default type</th>
 </tr>
 </thead>
 <tbody>
@@ -718,11 +622,6 @@ Defined in: [hooks/useEventListener.ts:42](https://github.com/aweebit/react-esse
 
 `Target` _extends_ `EventTarget`
 
-</td>
-<td>
-
-&hyphen;
-
 </td>
 </tr>
 <tr>
@@ -730,11 +629,6 @@ Defined in: [hooks/useEventListener.ts:42](https://github.com/aweebit/react-esse
 
 `EventMap`
 
-</td>
-<td>
-
-`Record`\<`string`, `Event`\>
-
 </td>
 </tr>
 </tbody>
@@ -805,11 +699,13 @@ Defined in: [hooks/useEventListener.ts:42](https://github.com/aweebit/react-esse
 ## UseEventListenerWithAnyExplicitTarget
 
 ```ts
-type UseEventListenerWithAnyExplicitTarget =
-  UseEventListenerWithExplicitTarget<EventTarget>;
+type UseEventListenerWithAnyExplicitTarget = UseEventListenerWithExplicitTarget<
+  EventTarget,
+  Record<string, Event>
+>;
 ```
 
-Defined in: [hooks/useEventListener.ts:54](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/hooks/useEventListener.ts#L54)
+Defined in: [hooks/useEventListener.ts:56](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/hooks/useEventListener.ts#L56)
 
 ### See
 
@@ -830,7 +726,7 @@ type UseEventListenerWithImplicitWindowTargetArgs<K> =
     : never;
 ```
 
-Defined in: [hooks/useEventListener.ts:62](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/hooks/useEventListener.ts#L62)
+Defined in: [hooks/useEventListener.ts:64](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/hooks/useEventListener.ts#L64)
 
 ### Type Parameters
 
@@ -875,7 +771,7 @@ type UseEventListenerWithExplicitTargetArgs<EventMap, T, K> = [
 ];
 ```
 
-Defined in: [hooks/useEventListener.ts:76](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/hooks/useEventListener.ts#L76)
+Defined in: [hooks/useEventListener.ts:78](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/hooks/useEventListener.ts#L78)
 
 ### Type Parameters
 
@@ -916,27 +812,17 @@ Defined in: [hooks/useEventListener.ts:76](https://github.com/aweebit/react-esse
 
 ---
 
-## RestrictedContext
+## SafeContext
 
 ```ts
-type RestrictedContext<T> =
-  Context<T> extends Provider<T>
-    ? {
-        Provider: Provider<T>;
-        displayName: string;
-      } & Provider<T>
-    : {
-        Provider: Provider<T>;
-        displayName: string;
-      };
+type SafeContext<DisplayName, T> = {
+  [K in `${DisplayName}Context`]: RestrictedContext<T>;
+} & { [K in `use${DisplayName}`]: () => T };
 ```
 
-Defined in: [misc/createSafeContext.ts:18](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/misc/createSafeContext.ts#L18)
+Defined in: [misc/createSafeContext.ts:13](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/misc/createSafeContext.ts#L13)
 
-A React context with a required `displayName` and the obsolete `Consumer`
-property purposefully omitted so that it is impossible to pass the context
-as an argument to `useContext` or `use` (the hook produced with
-[`createSafeContext`](#createsafecontext) should be used instead)
+The return type of [`createSafeContext`](#createsafecontext)
 
 ### Type Parameters
 
@@ -950,6 +836,13 @@ as an argument to `useContext` or `use` (the hook produced with
 <tr>
 <td>
 
+`DisplayName` _extends_ `string`
+
+</td>
+</tr>
+<tr>
+<td>
+
 `T`
 
 </td>
@@ -959,21 +852,32 @@ as an argument to `useContext` or `use` (the hook produced with
 
 ### See
 
-[`createSafeContext`](#createsafecontext)
+[`createSafeContext`](#createsafecontext),
+[`RestrictedContext`](#restrictedcontext)
 
 ---
 
-## SafeContext
+## RestrictedContext
 
 ```ts
-type SafeContext<DisplayName, T> = {
-  [K in `${DisplayName}Context`]: RestrictedContext<T>;
-} & { [K in `use${DisplayName}`]: () => T };
+type RestrictedContext<T> =
+  Context<T> extends Provider<T>
+    ? {
+        Provider: Provider<T>;
+        displayName: string;
+      } & Provider<T>
+    : {
+        Provider: Provider<T>;
+        displayName: string;
+      };
 ```
 
-Defined in: [misc/createSafeContext.ts:30](https://github.com/aweebit/react-essentials/blob/v0.8.0/src/misc/createSafeContext.ts#L30)
+Defined in: [misc/createSafeContext.ts:31](https://github.com/aweebit/react-essentials/blob/v0.9.0/src/misc/createSafeContext.ts#L31)
 
-The return type of [`createSafeContext`](#createsafecontext)
+A React context with a required `displayName` and the obsolete `Consumer`
+property purposefully omitted so that it is impossible to pass the context
+as an argument to `useContext` or `use` (the hook produced with
+[`createSafeContext`](#createsafecontext) should be used instead)
 
 ### Type Parameters
 
@@ -987,13 +891,6 @@ The return type of [`createSafeContext`](#createsafecontext)
 <tr>
 <td>
 
-`DisplayName` _extends_ `string`
-
-</td>
-</tr>
-<tr>
-<td>
-
 `T`
 
 </td>
@@ -1003,5 +900,4 @@ The return type of [`createSafeContext`](#createsafecontext)
 
 ### See
 
-[`createSafeContext`](#createsafecontext),
-[`RestrictedContext`](#restrictedcontext)
+[`createSafeContext`](#createsafecontext)

package/dist/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export * from './useEventListener.js';
-export * from './useForceUpdate.js';
 export * from './useReducerWithDeps.js';
 export * from './useStateWithDeps.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}

package/dist/hooks/index.js

@@ -1,5 +1,4 @@
 export * from './useEventListener.js';
-export * from './useForceUpdate.js';
 export * from './useReducerWithDeps.js';
 export * from './useStateWithDeps.js';
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}

package/dist/hooks/useEventListener.d.ts

@@ -1,9 +1,3 @@
-/**
- * @file Based on {@link https://github.com/juliencrn/usehooks-ts}
- *
- * @license MIT
- * @copyright 2020 Julien CARON
- */
 import { type RefObject } from 'react';
 /**
  * The type of {@linkcode useEventListener}
@@ -11,27 +5,34 @@ import { type RefObject } from 'react';
  * @see
  * {@linkcode useEventListener},
  * {@linkcode UseEventListenerWithImplicitWindowTarget},
- * {@linkcode UseEventListenerWithExplicitTarget},
+ * {@linkcode UseEventListenerWithExplicitGlobalTarget},
  * {@linkcode UseEventListenerWithAnyExplicitTarget}
  */
-export type UseEventListener = UseEventListenerWithImplicitWindowTarget & UseEventListenerWithExplicitTarget<Window, WindowEventMap> & UseEventListenerWithExplicitTarget<Document, DocumentEventMap> & UseEventListenerWithExplicitTarget<HTMLElement, HTMLElementEventMap> & UseEventListenerWithExplicitTarget<SVGElement, SVGElementEventMap> & UseEventListenerWithExplicitTarget<MathMLElement, MathMLElementEventMap> & UseEventListenerWithAnyExplicitTarget;
+export type UseEventListener = UseEventListenerWithImplicitWindowTarget & UseEventListenerWithExplicitGlobalTarget & UseEventListenerWithAnyExplicitTarget;
 /**
  * @see
  * {@linkcode useEventListener},
- * {@linkcode UseEventListenerWithImplicitWindowTargetArgs} */
+ * {@linkcode UseEventListenerWithImplicitWindowTargetArgs}
+ */
 export type UseEventListenerWithImplicitWindowTarget = <K extends keyof WindowEventMap>(...args: UseEventListenerWithImplicitWindowTargetArgs<K>) => void;
+/**
+ * @see
+ * {@linkcode useEventListener},
+ * {@linkcode UseEventListenerWithExplicitTarget}
+ */
+export type UseEventListenerWithExplicitGlobalTarget = UseEventListenerWithExplicitTarget<Window, WindowEventMap> & UseEventListenerWithExplicitTarget<Document, DocumentEventMap> & UseEventListenerWithExplicitTarget<HTMLElement, HTMLElementEventMap> & UseEventListenerWithExplicitTarget<SVGElement, SVGElementEventMap> & UseEventListenerWithExplicitTarget<MathMLElement, MathMLElementEventMap>;
 /**
  * @see
  * {@linkcode useEventListener},
  * {@linkcode UseEventListenerWithExplicitTargetArgs}
  */
-export type UseEventListenerWithExplicitTarget<Target extends EventTarget, EventMap = Record<string, Event>> = <T extends Target, K extends keyof EventMap>(...args: UseEventListenerWithExplicitTargetArgs<EventMap, T, K>) => void;
+export type UseEventListenerWithExplicitTarget<Target extends EventTarget, EventMap> = <T extends Target, K extends keyof EventMap>(...args: UseEventListenerWithExplicitTargetArgs<EventMap, T, K>) => void;
 /**
  * @see
  * {@linkcode useEventListener},
  * {@linkcode UseEventListenerWithExplicitTarget}
  */
-export type UseEventListenerWithAnyExplicitTarget = UseEventListenerWithExplicitTarget<EventTarget>;
+export type UseEventListenerWithAnyExplicitTarget = UseEventListenerWithExplicitTarget<EventTarget, Record<string, Event>>;
 /**
  * @see
  * {@linkcode useEventListener},

package/dist/hooks/useEventListener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG,wCAAwC,GACrE,kCAAkC,CAAC,MAAM,EAAE,cAAc,CAAC,GAC1D,kCAAkC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,GAC9D,kCAAkC,CAAC,WAAW,EAAE,mBAAmB,CAAC,GACpE,kCAAkC,CAAC,UAAU,EAAE,kBAAkB,CAAC,GAClE,kCAAkC,CAAC,aAAa,EAAE,qBAAqB,CAAC,GACxE,qCAAqC,CAAC;AAExC;;;8DAG8D;AAC9D,MAAM,MAAM,wCAAwC,GAAG,CACrD,CAAC,SAAS,MAAM,cAAc,EAE9B,GAAG,IAAI,EAAE,4CAA4C,CAAC,CAAC,CAAC,KACrD,IAAI,CAAC;AAEV;;;;GAIG;AACH,MAAM,MAAM,kCAAkC,CAC5C,MAAM,SAAS,WAAW,EAC1B,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IAC9B,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,QAAQ,EAC7C,GAAG,IAAI,EAAE,sCAAsC,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,KAC5D,IAAI,CAAC;AAEV;;;;GAIG;AACH,MAAM,MAAM,qCAAqC,GAC/C,kCAAkC,CAAC,WAAW,CAAC,CAAC;AAElD;;;;GAIG;AACH,MAAM,MAAM,4CAA4C,CACtD,CAAC,SAAS,MAAM,cAAc,IAE9B,sCAAsC,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS;IACxE,OAAO;IACP,GAAG,MAAM,IAAI;CACd,GACG,IAAI,GACJ,KAAK,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,sCAAsC,CAChD,QAAQ,EACR,CAAC,SAAS,WAAW,EACrB,CAAC,SAAS,MAAM,QAAQ,IACtB;IACF,MAAM,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG;QAAE,gBAAgB,CAAC,EAAE,KAAK,CAAA;KAAE,CAAC,GAAG,IAAI;IAChE,SAAS,EAAE,CAAC;IACZ,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI;IACvD,OAAO,CAAC,EAAE,uBAAuB,GAAG,OAAO,GAAG,SAAS;CACxD,CAAC;AAYF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBAkDV,CAAC"}
+{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG,wCAAwC,GACrE,wCAAwC,GACxC,qCAAqC,CAAC;AAExC;;;;GAIG;AACH,MAAM,MAAM,wCAAwC,GAAG,CACrD,CAAC,SAAS,MAAM,cAAc,EAE9B,GAAG,IAAI,EAAE,4CAA4C,CAAC,CAAC,CAAC,KACrD,IAAI,CAAC;AAEV;;;;GAIG;AACH,MAAM,MAAM,wCAAwC,GAClD,kCAAkC,CAAC,MAAM,EAAE,cAAc,CAAC,GACxD,kCAAkC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,GAC9D,kCAAkC,CAAC,WAAW,EAAE,mBAAmB,CAAC,GACpE,kCAAkC,CAAC,UAAU,EAAE,kBAAkB,CAAC,GAClE,kCAAkC,CAAC,aAAa,EAAE,qBAAqB,CAAC,CAAC;AAE7E;;;;GAIG;AACH,MAAM,MAAM,kCAAkC,CAC5C,MAAM,SAAS,WAAW,EAC1B,QAAQ,IACN,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,QAAQ,EAC7C,GAAG,IAAI,EAAE,sCAAsC,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,KAC5D,IAAI,CAAC;AAEV;;;;GAIG;AACH,MAAM,MAAM,qCAAqC,GAC/C,kCAAkC,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;AAEzE;;;;GAIG;AACH,MAAM,MAAM,4CAA4C,CACtD,CAAC,SAAS,MAAM,cAAc,IAE9B,sCAAsC,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS;IACxE,OAAO;IACP,GAAG,MAAM,IAAI;CACd,GACG,IAAI,GACJ,KAAK,CAAC;AAEZ;;;GAGG;AACH,MAAM,MAAM,sCAAsC,CAChD,QAAQ,EACR,CAAC,SAAS,WAAW,EACrB,CAAC,SAAS,MAAM,QAAQ,IACtB;IACF,MAAM,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG;QAAE,gBAAgB,CAAC,EAAE,KAAK,CAAA;KAAE,CAAC,GAAG,IAAI;IAChE,SAAS,EAAE,CAAC;IACZ,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI;IACvD,OAAO,CAAC,EAAE,uBAAuB,GAAG,OAAO,GAAG,SAAS;CACxD,CAAC;AAYF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBAoDV,CAAC"}

package/dist/hooks/useEventListener.js

@@ -1,9 +1,3 @@
-/**
- * @file Based on {@link https://github.com/juliencrn/usehooks-ts}
- *
- * @license MIT
- * @copyright 2020 Julien CARON
- */
 import { useEffect, useMemo, useRef } from 'react';
 /**
  * Adds `handler` as a listener for the event `eventName` of `target` with the
@@ -47,7 +41,9 @@ export const useEventListener = function useEventListener(...args) {
         : args;
     const unwrappedTarget = target && !('addEventListener' in target) ? target.current : target;
     const handlerRef = useRef(handler);
-    handlerRef.current = handler;
+    useEffect(() => {
+        handlerRef.current = handler;
+    }, [handler]);
     const { capture = false, once = false, passive, signal, } = typeof options === 'boolean' ? { capture: options } : (options ?? {});
     const memoizedOptions = useMemo(() => options, 
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/hooks/useEventListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListener.js","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AAyFnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAqB,SAAS,gBAAgB,CACzE,GAAG,IAE0C;IAE7C,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,GAMzC,OAAO,IAAI,CAAC,CAAC,CAAC,KAAK,QAAQ;QACzB,CAAC,CAAC,CAAC,MAAM,EAAE,GAAI,IAAwD,CAAC;QACxE,CAAC,CAAE,IAAkD,CAAC;IAE1D,MAAM,eAAe,GACnB,MAAM,IAAI,CAAC,CAAC,kBAAkB,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAEtE,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,MAAM,EACJ,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,KAAK,EACZ,OAAO,EACP,MAAM,GACP,GAAG,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAE1E,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,OAAO;IACb,uDAAuD;IACvD,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CACjC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,KAAK,IAAI,EAAE,CAAC;YAC7B,8CAA8C;YAC9C,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAmB,UAAU,KAAK;YAC9C,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC;QAEF,eAAe,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;QAC5E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC;AACpD,CAAqB,CAAC"}
+{"version":3,"file":"useEventListener.js","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AAkGnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAqB,SAAS,gBAAgB,CACzE,GAAG,IAE0C;IAE7C,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,GAMzC,OAAO,IAAI,CAAC,CAAC,CAAC,KAAK,QAAQ;QACzB,CAAC,CAAC,CAAC,MAAM,EAAE,GAAI,IAAwD,CAAC;QACxE,CAAC,CAAE,IAAkD,CAAC;IAE1D,MAAM,eAAe,GACnB,MAAM,IAAI,CAAC,CAAC,kBAAkB,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAEtE,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAC/B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,EACJ,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,KAAK,EACZ,OAAO,EACP,MAAM,GACP,GAAG,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAE1E,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,OAAO;IACb,uDAAuD;IACvD,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CACjC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,KAAK,IAAI,EAAE,CAAC;YAC7B,8CAA8C;YAC9C,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAmB,UAAU,KAAK;YAC9C,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC;QAEF,eAAe,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;QAC5E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC;AACpD,CAAqB,CAAC"}

package/dist/hooks/useReducerWithDeps.d.ts

@@ -7,6 +7,13 @@ export type ActionDispatch<ActionArg extends AnyActionArg> = (...args: ActionArg
  * `useReducer` hook with an additional dependency array `deps` that resets the
  * state to `initialState` when dependencies change
  *
+ * This hook is the reducer pattern counterpart of {@linkcode useStateWithDeps}.
+ *
+ * Due to React's limitations, a change in dependencies always causes two
+ * renders when using this hook. The result of the first render is thrown away
+ * as described in
+ * [useState > Storing information from previous renders](https://react.dev/reference/react/useState#storing-information-from-previous-renders).
+ *
  * For motivation and examples, see
  * https://github.com/facebook/react/issues/33041.
  *

package/dist/hooks/useReducerWithDeps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReducerWithDeps.d.ts","sourceRoot":"","sources":["../../src/hooks/useReducerWithDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAU,MAAM,OAAO,CAAC;AAOpD,cAAc;AAEd,MAAM,MAAM,YAAY,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;AAEtC,cAAc;AACd,MAAM,MAAM,cAAc,CAAC,SAAS,SAAS,YAAY,IAAI,CAC3D,GAAG,IAAI,EAAE,SAAS,KACf,IAAI,CAAC;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,YAAY,EAC1D,OAAO,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,EACxC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAC5C,IAAI,EAAE,cAAc,GACnB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAYxB"}
+{"version":3,"file":"useReducerWithDeps.d.ts","sourceRoot":"","sources":["../../src/hooks/useReducerWithDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAU,MAAM,OAAO,CAAC;AAOpD,cAAc;AAEd,MAAM,MAAM,YAAY,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;AAEtC,cAAc;AACd,MAAM,MAAM,cAAc,CAAC,SAAS,SAAS,YAAY,IAAI,CAC3D,GAAG,IAAI,EAAE,SAAS,KACf,IAAI,CAAC;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,YAAY,EAC1D,OAAO,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,EACxC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAC5C,IAAI,EAAE,cAAc,GACnB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAYxB"}

package/dist/hooks/useReducerWithDeps.js

@@ -4,6 +4,13 @@ import { useStateWithDeps } from './useStateWithDeps.js';
  * `useReducer` hook with an additional dependency array `deps` that resets the
  * state to `initialState` when dependencies change
  *
+ * This hook is the reducer pattern counterpart of {@linkcode useStateWithDeps}.
+ *
+ * Due to React's limitations, a change in dependencies always causes two
+ * renders when using this hook. The result of the first render is thrown away
+ * as described in
+ * [useState > Storing information from previous renders](https://react.dev/reference/react/useState#storing-information-from-previous-renders).
+ *
  * For motivation and examples, see
  * https://github.com/facebook/react/issues/33041.
  *
@@ -40,9 +47,9 @@ export function useReducerWithDeps(reducer, initialState, deps) {
     const [state, setState] = useStateWithDeps(initialState, deps);
     // Only the initially provided reducer is used
     const reducerRef = useRef(reducer);
-    const dispatch = useRef(function dispatch(...args) {
+    function dispatch(...args) {
         setState((previousState) => reducerRef.current(previousState, ...args));
-    }).current;
-    return [state, dispatch];
+    }
+    return [state, useRef(dispatch).current];
 }
 //# sourceMappingURL=useReducerWithDeps.js.map

package/dist/hooks/useReducerWithDeps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReducerWithDeps.js","sourceRoot":"","sources":["../../src/hooks/useReducerWithDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,MAAM,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAezD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,kBAAkB,CAChC,OAAwC,EACxC,YAA4C,EAC5C,IAAoB;IAEpB,uDAAuD;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAE/D,8CAA8C;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,QAAQ,CAAC,GAAG,IAAO;QAClD,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC,OAAO,CAAC;IAEX,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"useReducerWithDeps.js","sourceRoot":"","sources":["../../src/hooks/useReducerWithDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,MAAM,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAezD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,UAAU,kBAAkB,CAChC,OAAwC,EACxC,YAA4C,EAC5C,IAAoB;IAEpB,uDAAuD;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAE/D,8CAA8C;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAEnC,SAAS,QAAQ,CAAC,GAAG,IAAO;QAC1B,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1E,CAAC;IAED,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;AAC3C,CAAC"}

package/dist/hooks/useStateWithDeps.d.ts

@@ -1,14 +1,13 @@
-/**
- * @file Based on {@link https://github.com/peterjuras/use-state-with-deps}
- *
- * @license MIT
- * @copyright 2020 Peter Juras
- */
 import { type DependencyList, type Dispatch, type SetStateAction } from 'react';
 /**
  * `useState` hook with an additional dependency array `deps` that resets the
  * state to `initialState` when dependencies change
  *
+ * Due to React's limitations, a change in dependencies always causes two
+ * renders when using this hook. The result of the first render is thrown away
+ * as described in
+ * [useState > Storing information from previous renders](https://react.dev/reference/react/useState#storing-information-from-previous-renders).
+ *
  * For motivation and more examples, see
  * https://github.com/facebook/react/issues/33041.
  *
@@ -27,7 +26,7 @@ import { type DependencyList, type Dispatch, type SetStateAction } from 'react';
  *   evening: ['board games', 'dinner'],
  * };
  *
- * export function Example() {
+ * function Example() {
  *   const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>('morning');
  *
  *   const activityOptions = activityOptionsByTimeOfDay[timeOfDay];