@aweebit/react-essentials 0.8.0 → 0.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"useStateWithDeps.d.ts","sourceRoot":"","sources":["../../src/hooks/useStateWithDeps.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAIf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAC5C,IAAI,EAAE,cAAc,GACnB,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CA0ClC"}
+{"version":3,"file":"useStateWithDeps.d.ts","sourceRoot":"","sources":["../../src/hooks/useStateWithDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAGf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAC5C,IAAI,EAAE,cAAc,GACnB,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAWlC"}

package/dist/hooks/useStateWithDeps.js

@@ -1,16 +1,14 @@
-/**
- * @file Based on {@link https://github.com/peterjuras/use-state-with-deps}
- *
- * @license MIT
- * @copyright 2020 Peter Juras
- */
-import { useRef, } from 'react';
-import { depsAreEqual, isFunction } from '../utils.js';
-import { useForceUpdate } from './useForceUpdate.js';
+import { useState, } from 'react';
+import { depsAreEqual } from '../utils.js';
 /**
  * `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.
  *
@@ -29,7 +27,7 @@ import { useForceUpdate } from './useForceUpdate.js';
  *   evening: ['board games', 'dinner'],
  * };
  *
- * export function Example() {
+ * function Example() {
  *   const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>('morning');
  *
  *   const activityOptions = activityOptionsByTimeOfDay[timeOfDay];
@@ -56,41 +54,12 @@ import { useForceUpdate } from './useForceUpdate.js';
  * @param deps Dependencies that reset the state to `initialState`
  */
 export function useStateWithDeps(initialState, deps) {
-    // It would be possible to use useState instead of useRef to store the state,
-    // however this would trigger re-renders whenever the state is reset due to a
-    // change in dependencies. In order to avoid these re-renders, the state is
-    // stored in a ref, and updates are triggered with forceUpdate when necessary.
-    const state = useRef(undefined);
-    const prevDeps = useRef(deps);
-    const isMounted = useRef(false);
-    // If first render, or if dependencies have changed since last time
-    if (!isMounted.current || !depsAreEqual(prevDeps.current, deps)) {
-        // Update state and deps
-        let nextState;
-        if (isFunction(initialState)) {
-            nextState = initialState(state.current);
-        }
-        else {
-            nextState = initialState;
-        }
-        state.current = nextState;
-        prevDeps.current = deps;
-        isMounted.current = true;
+    const [state, setState] = useState(initialState);
+    const [prevDeps, setPrevDeps] = useState(deps);
+    if (!depsAreEqual(deps, prevDeps)) {
+        setPrevDeps(deps);
+        setState(initialState);
     }
-    const [forceUpdate] = useForceUpdate();
-    const updateState = useRef(function updateState(newState) {
-        let nextState;
-        if (isFunction(newState)) {
-            nextState = newState(state.current);
-        }
-        else {
-            nextState = newState;
-        }
-        if (!Object.is(state.current, nextState)) {
-            state.current = nextState;
-            forceUpdate();
-        }
-    }).current;
-    return [state.current, updateState];
+    return [state, setState];
 }
 //# sourceMappingURL=useStateWithDeps.js.map

package/dist/hooks/useStateWithDeps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStateWithDeps.js","sourceRoot":"","sources":["../../src/hooks/useStateWithDeps.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,MAAM,GAIP,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,gBAAgB,CAC9B,YAA4C,EAC5C,IAAoB;IAEpB,6EAA6E;IAC7E,6EAA6E;IAC7E,2EAA2E;IAC3E,8EAA8E;IAC9E,MAAM,KAAK,GAAG,MAAM,CAAC,SAAc,CAAC,CAAC;IAErC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEhC,mEAAmE;IACnE,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;QAChE,wBAAwB;QACxB,IAAI,SAAY,CAAC;QACjB,IAAI,UAAU,CAAC,YAAY,CAAC,EAAE,CAAC;YAC7B,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,SAAS,GAAG,YAAY,CAAC;QAC3B,CAAC;QACD,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;QAC1B,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED,MAAM,CAAC,WAAW,CAAC,GAAG,cAAc,EAAE,CAAC;IAEvC,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,WAAW,CAC7C,QAAuC;QAEvC,IAAI,SAAY,CAAC;QACjB,IAAI,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YACzB,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC;aAAM,CAAC;YACN,SAAS,GAAG,QAAQ,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC;YACzC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;YAC1B,WAAW,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC,CAAC,OAAO,CAAC;IAEX,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;AACtC,CAAC"}
+{"version":3,"file":"useStateWithDeps.js","sourceRoot":"","sources":["../../src/hooks/useStateWithDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,GAIT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,MAAM,UAAU,gBAAgB,CAC9B,YAA4C,EAC5C,IAAoB;IAEpB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAEjD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC;QAClC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzB,CAAC;IAED,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC"}

package/dist/misc/createSafeContext.d.ts

@@ -1,5 +1,17 @@
 import { type Context, type Provider } from 'react';
 import type { ArgumentFallback } from '../utils.js';
+/**
+ * The return type of {@linkcode createSafeContext}
+ *
+ * @see
+ * {@linkcode createSafeContext},
+ * {@linkcode RestrictedContext}
+ */
+export type SafeContext<DisplayName extends string, T> = {
+    [K in `${DisplayName}Context`]: RestrictedContext<T>;
+} & {
+    [K in `use${DisplayName}`]: () => T;
+};
 /**
  * A React context with a required `displayName` and the obsolete `Consumer`
  * property purposefully omitted so that it is impossible to pass the context
@@ -16,18 +28,6 @@ export type RestrictedContext<T> = Context<T> extends Provider<T> ? {
     Provider: Provider<T>;
     displayName: string;
 };
-/**
- * The return type of {@linkcode createSafeContext}
- *
- * @see
- * {@linkcode createSafeContext},
- * {@linkcode RestrictedContext}
- */
-export type SafeContext<DisplayName extends string, T> = {
-    [K in `${DisplayName}Context`]: RestrictedContext<T>;
-} & {
-    [K in `use${DisplayName}`]: () => T;
-};
 /**
  * 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,

package/dist/misc/createSafeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createSafeContext.d.ts","sourceRoot":"","sources":["../../src/misc/createSafeContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAA6B,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD;;;;;;;;GAQG;AAIH,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAC7B,OAAO,CAAC,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,GAC1B;IAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,GAC5D;IAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,MAAM,EAAE,CAAC,IAAI;KACtD,CAAC,IAAI,GAAG,WAAW,SAAS,GAAG,iBAAiB,CAAC,CAAC,CAAC;CACrD,GAAG;KACD,CAAC,IAAI,MAAM,WAAW,EAAE,GAAG,MAAM,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,KAAK,MACjC,WAAW,SAAS,MAAM,EAChC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GAC5B,KAAK,GACL,gBAAgB,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,KAC/C,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAsB/B"}
+{"version":3,"file":"createSafeContext.d.ts","sourceRoot":"","sources":["../../src/misc/createSafeContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAA6B,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,MAAM,EAAE,CAAC,IAAI;KACtD,CAAC,IAAI,GAAG,WAAW,SAAS,GAAG,iBAAiB,CAAC,CAAC,CAAC;CACrD,GAAG;KACD,CAAC,IAAI,MAAM,WAAW,EAAE,GAAG,MAAM,CAAC;CACpC,CAAC;AAEF;;;;;;;;GAQG;AAIH,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAC7B,OAAO,CAAC,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,GAC1B;IAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,GAC5D;IAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,KAAK,MACjC,WAAW,SAAS,MAAM,EAChC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GAC5B,KAAK,GACL,gBAAgB,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,KAC/C,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAsB/B"}

package/dist/utils.d.ts

@@ -1,7 +1,4 @@
 import type { DependencyList } from 'react';
-export type Callable = (...args: never) => unknown;
 export type ArgumentFallback<T extends Base, Default extends Base, Base = unknown> = [T] extends [never] ? Default : [Base] extends [T] ? Default : T;
-export declare function noop(): void;
-export declare function isFunction(input: unknown): input is Callable;
 export declare function depsAreEqual(prevDeps: DependencyList, deps: DependencyList): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC;AAEnD,MAAM,MAAM,gBAAgB,CAC1B,CAAC,SAAS,IAAI,EACd,OAAO,SAAS,IAAI,EACpB,IAAI,GAAG,OAAO,IACZ,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC;AAErE,wBAAgB,IAAI,SAAK;AAEzB,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,QAAQ,CAE5D;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAE,cAAc,GACnB,OAAO,CAKT"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,gBAAgB,CAC1B,CAAC,SAAS,IAAI,EACd,OAAO,SAAS,IAAI,EACpB,IAAI,GAAG,OAAO,IACZ,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC;AAErE,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAE,cAAc,GACnB,OAAO,CAKT"}

package/dist/utils.js

@@ -1,7 +1,3 @@
-export function noop() { }
-export function isFunction(input) {
-    return typeof input === 'function';
-}
 export function depsAreEqual(prevDeps, deps) {
     return (prevDeps.length === deps.length &&
         deps.every((dep, index) => Object.is(dep, prevDeps[index])));

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,IAAI,KAAI,CAAC;AAEzB,MAAM,UAAU,UAAU,CAAC,KAAc;IACvC,OAAO,OAAO,KAAK,KAAK,UAAU,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,YAAY,CAC1B,QAAwB,EACxB,IAAoB;IAEpB,OAAO,CACL,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;QAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAC5D,CAAC;AACJ,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,YAAY,CAC1B,QAAwB,EACxB,IAAoB;IAEpB,OAAO,CACL,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;QAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAC5D,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aweebit/react-essentials",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "repository": "github:aweebit/react-essentials",
   "main": "dist/index.js",

package/src/hooks/index.ts

@@ -1,4 +1,3 @@
 export * from './useEventListener.js';
-export * from './useForceUpdate.js';
 export * from './useReducerWithDeps.js';
 export * from './useStateWithDeps.js';

package/src/hooks/useEventListener.ts

@@ -1,10 +1,3 @@
-/**
- * @file Based on {@link https://github.com/juliencrn/usehooks-ts}
- *
- * @license MIT
- * @copyright 2020 Julien CARON
- */
-
 import { useEffect, useMemo, useRef, type RefObject } from 'react';
 
 /**
@@ -13,27 +6,36 @@ import { useEffect, useMemo, useRef, 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> &
+  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},
@@ -41,7 +43,7 @@ export type UseEventListenerWithImplicitWindowTarget = <
  */
 export type UseEventListenerWithExplicitTarget<
   Target extends EventTarget,
-  EventMap = Record<string, Event>,
+  EventMap,
 > = <T extends Target, K extends keyof EventMap>(
   ...args: UseEventListenerWithExplicitTargetArgs<EventMap, T, K>
 ) => void;
@@ -52,7 +54,7 @@ export type UseEventListenerWithExplicitTarget<
  * {@linkcode UseEventListenerWithExplicitTarget}
  */
 export type UseEventListenerWithAnyExplicitTarget =
-  UseEventListenerWithExplicitTarget<EventTarget>;
+  UseEventListenerWithExplicitTarget<EventTarget, Record<string, Event>>;
 
 /**
  * @see
@@ -149,7 +151,9 @@ export const useEventListener: UseEventListener = function useEventListener(
     target && !('addEventListener' in target) ? target.current : target;
 
   const handlerRef = useRef(handler);
-  handlerRef.current = handler;
+  useEffect(() => {
+    handlerRef.current = handler;
+  }, [handler]);
 
   const {
     capture = false,

package/src/hooks/useReducerWithDeps.ts

@@ -18,6 +18,13 @@ export type ActionDispatch<ActionArg extends AnyActionArg> = (
  * `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.
  *
@@ -60,9 +67,9 @@ export function useReducerWithDeps<S, A extends AnyActionArg>(
   // Only the initially provided reducer is used
   const reducerRef = useRef(reducer);
 
-  const dispatch = useRef(function dispatch(...args: A): void {
+  function dispatch(...args: A): void {
     setState((previousState) => reducerRef.current(previousState, ...args));
-  }).current;
+  }
 
-  return [state, dispatch];
+  return [state, useRef(dispatch).current];
 }

package/src/hooks/useStateWithDeps.ts

@@ -1,23 +1,20 @@
-/**
- * @file Based on {@link https://github.com/peterjuras/use-state-with-deps}
- *
- * @license MIT
- * @copyright 2020 Peter Juras
- */
-
 import {
-  useRef,
+  useState,
   type DependencyList,
   type Dispatch,
   type SetStateAction,
 } from 'react';
-import { depsAreEqual, isFunction } from '../utils.js';
-import { useForceUpdate } from './useForceUpdate.js';
+import { depsAreEqual } from '../utils.js';
 
 /**
  * `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.
  *
@@ -36,7 +33,7 @@ import { useForceUpdate } from './useForceUpdate.js';
  *   evening: ['board games', 'dinner'],
  * };
  *
- * export function Example() {
+ * function Example() {
  *   const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>('morning');
  *
  *   const activityOptions = activityOptionsByTimeOfDay[timeOfDay];
@@ -66,45 +63,14 @@ export function useStateWithDeps<S>(
   initialState: S | ((previousState?: S) => S),
   deps: DependencyList,
 ): [S, Dispatch<SetStateAction<S>>] {
-  // It would be possible to use useState instead of useRef to store the state,
-  // however this would trigger re-renders whenever the state is reset due to a
-  // change in dependencies. In order to avoid these re-renders, the state is
-  // stored in a ref, and updates are triggered with forceUpdate when necessary.
-  const state = useRef(undefined as S);
+  const [state, setState] = useState(initialState);
 
-  const prevDeps = useRef(deps);
-  const isMounted = useRef(false);
+  const [prevDeps, setPrevDeps] = useState(deps);
 
-  // If first render, or if dependencies have changed since last time
-  if (!isMounted.current || !depsAreEqual(prevDeps.current, deps)) {
-    // Update state and deps
-    let nextState: S;
-    if (isFunction(initialState)) {
-      nextState = initialState(state.current);
-    } else {
-      nextState = initialState;
-    }
-    state.current = nextState;
-    prevDeps.current = deps;
-    isMounted.current = true;
+  if (!depsAreEqual(deps, prevDeps)) {
+    setPrevDeps(deps);
+    setState(initialState);
   }
 
-  const [forceUpdate] = useForceUpdate();
-
-  const updateState = useRef(function updateState(
-    newState: S | ((previousState: S) => S),
-  ): void {
-    let nextState: S;
-    if (isFunction(newState)) {
-      nextState = newState(state.current);
-    } else {
-      nextState = newState;
-    }
-    if (!Object.is(state.current, nextState)) {
-      state.current = nextState;
-      forceUpdate();
-    }
-  }).current;
-
-  return [state.current, updateState];
+  return [state, setState];
 }

package/src/misc/createSafeContext.ts

@@ -3,6 +3,19 @@ import type { ArgumentFallback } from '../utils.js';
 
 const moValueSymbol = Symbol('noValue');
 
+/**
+ * The return type of {@linkcode createSafeContext}
+ *
+ * @see
+ * {@linkcode createSafeContext},
+ * {@linkcode RestrictedContext}
+ */
+export type SafeContext<DisplayName extends string, T> = {
+  [K in `${DisplayName}Context`]: RestrictedContext<T>;
+} & {
+  [K in `use${DisplayName}`]: () => T;
+};
+
 /**
  * A React context with a required `displayName` and the obsolete `Consumer`
  * property purposefully omitted so that it is impossible to pass the context
@@ -20,19 +33,6 @@ export type RestrictedContext<T> =
     ? { Provider: Provider<T>; displayName: string } & Provider<T>
     : { Provider: Provider<T>; displayName: string };
 
-/**
- * The return type of {@linkcode createSafeContext}
- *
- * @see
- * {@linkcode createSafeContext},
- * {@linkcode RestrictedContext}
- */
-export type SafeContext<DisplayName extends string, T> = {
-  [K in `${DisplayName}Context`]: RestrictedContext<T>;
-} & {
-  [K in `use${DisplayName}`]: () => T;
-};
-
 /**
  * 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,

package/src/utils.ts

@@ -1,19 +1,11 @@
 import type { DependencyList } from 'react';
 
-export type Callable = (...args: never) => unknown;
-
 export type ArgumentFallback<
   T extends Base,
   Default extends Base,
   Base = unknown,
 > = [T] extends [never] ? Default : [Base] extends [T] ? Default : T;
 
-export function noop() {}
-
-export function isFunction(input: unknown): input is Callable {
-  return typeof input === 'function';
-}
-
 export function depsAreEqual(
   prevDeps: DependencyList,
   deps: DependencyList,

package/dist/hooks/useForceUpdate.d.ts

@@ -1,75 +0,0 @@
-/**
- * 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],
- * );
- * ```
- *
- * @param callback 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
- * {@link https://react.dev/learn/-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes You Might Not Need an Effect > Adjusting some state when a prop changes}),
- * but can often be avoided by using {@linkcode useStateWithDeps} or
- * {@linkcode 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.
- *
- * @returns 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
- */
-export declare function useForceUpdate(callback?: () => void): [() => void, bigint];
-//# sourceMappingURL=useForceUpdate.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useForceUpdate.d.ts","sourceRoot":"","sources":["../../src/hooks/useForceUpdate.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,EAAE,MAAM,CAAC,CAU1E"}

package/dist/hooks/useForceUpdate.js

@@ -1,87 +0,0 @@
-import { useReducer, useRef } from 'react';
-/* eslint-enable */
-/**
- * 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],
- * );
- * ```
- *
- * @param callback 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
- * {@link https://react.dev/learn/-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes You Might Not Need an Effect > Adjusting some state when a prop changes}),
- * but can often be avoided by using {@linkcode useStateWithDeps} or
- * {@linkcode 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.
- *
- * @returns 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
- */
-export function useForceUpdate(callback) {
-    // It is very unlikely that the number of updates will exceed
-    // Number.MAX_SAFE_INTEGER, but not impossible. That is why we use bigints.
-    const [updateCount, forceUpdate] = useReducer((prev) => prev + 1n, 0n);
-    const updateCountRef = useRef(updateCount);
-    if (updateCount !== updateCountRef.current) {
-        updateCountRef.current = updateCount;
-        callback?.();
-    }
-    return [forceUpdate, updateCount];
-}
-//# sourceMappingURL=useForceUpdate.js.map

package/dist/hooks/useForceUpdate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useForceUpdate.js","sourceRoot":"","sources":["../../src/hooks/useForceUpdate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAK3C,mBAAmB;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,MAAM,UAAU,cAAc,CAAC,QAAqB;IAClD,6DAA6D;IAC7D,2EAA2E;IAC3E,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,GAAG,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC;IACvE,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAC3C,IAAI,WAAW,KAAK,cAAc,CAAC,OAAO,EAAE,CAAC;QAC3C,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;QACrC,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC;IACD,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AACpC,CAAC"}