@aweebit/react-essentials 0.5.4 → 0.7.0

package/src/hooks/useForceUpdate.ts

@@ -0,0 +1,91 @@
+import { useReducer, useRef } from 'react';
+
+/* eslint-disable */
+import type { useStateWithDeps } from './useStateWithDeps.js';
+import type { useReducerWithDeps } from './useReducerWithDeps.js';
+/* 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?: () => void): [() => void, bigint] {
+  // 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];
+}

package/{lib → src}/hooks/useReducerWithDeps.ts

@@ -1,16 +1,25 @@
-import {
-  type ActionDispatch,
-  type AnyActionArg,
-  type DependencyList,
-  useCallback,
-  useRef,
-} from 'react';
-import useStateWithDeps from './useStateWithDeps.js';
+import { type DependencyList, useCallback, useRef } from 'react';
+import { useStateWithDeps } from './useStateWithDeps.js';
+
+// We cannot simply import the following types from @types/react since they are
+// only available starting from React 19, but we also want to support React 18
+// whose type declarations for useReducer are very different.
+
+/** @ignore */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyActionArg = [] | [any];
+
+/** @ignore */
+export type ActionDispatch<ActionArg extends AnyActionArg> = (
+  ...args: ActionArg
+) => void;
 
 /**
- * `useReducer` hook with an additional dependency array that resets the state
- * to the `initialState` param when the dependencies passed in the `deps` array
- * change
+ * `useReducer` hook with an additional dependency array `deps` that resets the
+ * state to `initialState` when dependencies change
+ *
+ * For motivation and examples, see
+ * https://github.com/facebook/react/issues/33041.
  *
  * ### On linter support
  *
@@ -19,28 +28,28 @@ import useStateWithDeps from './useStateWithDeps.js';
  * However, as we would like to keep the hook as compatible with `useReducer` as
  * possible, we don't want to artificially change the parameter's position.
  * Therefore, there will be no warnings about missing dependencies.
- * Because of that, addition caution is advised!
- * Be sure to check no dependencies are missing from the `deps` array.
+ * Because of that, additional caution is advised!
+ * Be sure to check that no dependencies are missing from the `deps` array.
  *
  * Related issue: {@link https://github.com/facebook/react/issues/25443}.
  *
  * Unlike `eslint-plugin-react-hooks` maintained by React's team, the unofficial
  * `useExhaustiveDependencies` rule provided for Biome by Biome's team
  * does actually have support for dependency arrays at other positions, see
- * {@link https://biomejs.dev/linter/rules/use-exhaustive-dependencies/#validating-dependencies}.
+ * {@link https://biomejs.dev/linter/rules/use-exhaustive-dependencies/#validating-dependencies useExhaustiveDependencies > Options > Validating dependencies}.
  *
  * @param reducer The reducer function that specifies how the state gets updated
  *
- * @param initialState The state that will be set when the component mounts or
- * the dependencies change
+ * @param initialState The value to which the state is set when the component is
+ * mounted or dependencies change
  *
- * It can also be a function which returns a state value. If the state is reset
+ * It can also be a function that returns a state value. If the state is reset
  * due to a change of dependencies, this function will be passed the previous
  * state as its argument (will be `undefined` in the first call upon mount).
  *
  * @param deps Dependencies that reset the state to `initialState`
  */
-export default function useReducerWithDeps<S, A extends AnyActionArg>(
+export function useReducerWithDeps<S, A extends AnyActionArg>(
   reducer: (prevState: S, ...args: A) => S,
   initialState: S | ((previousState?: S) => S),
   deps: DependencyList,

package/src/hooks/useStateWithDeps.ts

@@ -0,0 +1,111 @@
+/**
+ * @file Based on {@link https://github.com/peterjuras/use-state-with-deps}
+ *
+ * @license MIT
+ * @copyright 2020 Peter Juras
+ */
+
+import {
+  useCallback,
+  useRef,
+  type DependencyList,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import { depsAreEqual, isFunction } from '../utils.js';
+import { useForceUpdate } from './useForceUpdate.js';
+
+/**
+ * `useState` hook with an additional dependency array `deps` that resets the
+ * state to `initialState` when dependencies change
+ *
+ * For motivation and more examples, see
+ * https://github.com/facebook/react/issues/33041.
+ *
+ * @example
+ * ```tsx
+ * type Activity = 'breakfast' | 'exercise' | 'swim' | 'board games' | 'dinner';
+ *
+ * const timeOfDayOptions = ['morning', 'afternoon', 'evening'] as const;
+ * type TimeOfDay = (typeof timeOfDayOptions)[number];
+ *
+ * const activityOptionsByTimeOfDay: {
+ *   [K in TimeOfDay]: [Activity, ...Activity[]];
+ * } = {
+ *   morning: ['breakfast', 'exercise', 'swim'],
+ *   afternoon: ['exercise', 'swim', 'board games'],
+ *   evening: ['board games', 'dinner'],
+ * };
+ *
+ * export function Example() {
+ *   const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>('morning');
+ *
+ *   const activityOptions = activityOptionsByTimeOfDay[timeOfDay];
+ *   const [activity, setActivity] = useStateWithDeps<Activity>(
+ *     (prev) => {
+ *       // Make sure activity is always valid for the current timeOfDay value,
+ *       // but also don't reset it unless necessary:
+ *       return prev && activityOptions.includes(prev) ? prev : activityOptions[0];
+ *     },
+ *     [activityOptions],
+ *   );
+ *
+ *   return '...';
+ * }
+ * ```
+ *
+ * @param initialState The value to which the state is set when the component is
+ * mounted or dependencies change
+ *
+ * It can also be a function that returns a state value. If the state is reset
+ * due to a change of dependencies, this function will be passed the previous
+ * state as its argument (will be `undefined` in the first call upon mount).
+ *
+ * @param deps Dependencies that reset the state to `initialState`
+ */
+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 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: S;
+    if (isFunction(initialState)) {
+      nextState = initialState(state.current);
+    } else {
+      nextState = initialState;
+    }
+    state.current = nextState;
+    prevDeps.current = deps;
+    isMounted.current = true;
+  }
+
+  const [forceUpdate] = useForceUpdate();
+
+  const updateState = useCallback(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();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return [state.current, updateState];
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './hooks/index.js';
+export * from './misc/index.js';

package/src/misc/createSafeContext.ts

@@ -0,0 +1,116 @@
+import { type Context, type Provider, createContext, useContext } from 'react';
+import type { ArgumentFallback } from '../utils.js';
+
+const moValueSymbol = Symbol('noValue');
+
+/**
+ * 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
+ * {@linkcode createSafeContext} should be used instead)
+ *
+ * @see {@linkcode createSafeContext}
+ */
+// The type is conditional so that both React 18 and 19 are correctly supported.
+// The code duplication is necessary for the type to be displayed correctly by
+// TypeDoc.
+export type RestrictedContext<T> =
+  Context<T> extends Provider<T>
+    ? { Provider: Provider<T>; displayName: string } & Provider<T>
+    : { Provider: Provider<T>; displayName: string };
+
+/**
+ * The return type of {@linkcode createSafeContext}
+ *
+ * @see {@linkcode createSafeContext}
+ */
+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,
+ * or throws an error otherwise
+ *
+ * The advantages over vanilla `createContext` are that no default value has to
+ * be provided, and that a meaningful context name is displayed in dev tools
+ * instead of generic `Context.Provider`.
+ *
+ * @example
+ * ```tsx
+ * enum Direction {
+ *   Up,
+ *   Down,
+ *   Left,
+ *   Right,
+ * }
+ *
+ * // Before
+ * const DirectionContext = createContext<Direction | undefined>(undefined);
+ * DirectionContext.displayName = 'DirectionContext';
+ *
+ * const useDirection = () => {
+ *   const direction = useContext(DirectionContext);
+ *   if (direction === undefined) {
+ *     // Called outside of a <DirectionContext.Provider> boundary!
+ *     // Or maybe undefined was explicitly provided as the context value
+ *     // (ideally that shouldn't be allowed, but it is because we had to include
+ *     // undefined in the context type so as to provide a meaningful default)
+ *     throw new Error('No DirectionContext value was provided');
+ *   }
+ *   // Thanks to the undefined check, the type is now narrowed down to Direction
+ *   return direction;
+ * };
+ *
+ * // After
+ * const { DirectionContext, useDirection } =
+ *   createSafeContext<Direction>()('Direction'); // That's it :)
+ *
+ * const Parent = () => (
+ *   // Providing undefined as the value is not allowed 👍
+ *   <Direction.Provider value={Direction.Up}>
+ *     <Child />
+ *   </Direction.Provider>
+ * );
+ *
+ * const Child = () => `Current direction: ${Direction[useDirection()]}`;
+ * ```
+ *
+ * @returns
+ * A function that accepts a single string argument `displayName` (e.g.
+ * `"Direction"`) and returns an object with the following properties:
+ * - ``` `${displayName}Context` ``` (e.g. `DirectionContext`): the context
+ * - ``` `use${displayName}` ``` (e.g. `useDirection`): a hook that returns the
+ *   current context value if one was provided, or throws an error otherwise
+ */
+export function createSafeContext<T = never>() {
+  return <DisplayName extends string>(
+    displayName: [T] extends [never]
+      ? never
+      : ArgumentFallback<DisplayName, never, string>,
+  ): SafeContext<DisplayName, T> => {
+    const contextName = `${displayName as DisplayName}Context` as const;
+    const hookName = `use${displayName as DisplayName}` as const;
+
+    const Context = createContext<T | typeof moValueSymbol>(moValueSymbol);
+    Context.displayName = contextName;
+
+    return {
+      [contextName]: Context as RestrictedContext<T>,
+      [hookName]: () => {
+        const value = useContext(Context);
+        if (value === moValueSymbol) {
+          throw new Error(`No ${contextName} value was provided`);
+        }
+        return value;
+      },
+    } as {
+      [K in typeof contextName]: RestrictedContext<T>;
+    } & {
+      [K in typeof hookName]: () => T;
+    };
+  };
+}

package/src/misc/index.ts

@@ -0,0 +1 @@
+export * from './createSafeContext.js';

package/{lib/utils/index.ts → src/utils.ts}

@@ -1,9 +1,16 @@
 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() {}
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-export function isFunction(input: unknown): input is Function {
+export function isFunction(input: unknown): input is Callable {
   return typeof input === 'function';
 }
 

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,4 +0,0 @@
-import { useLayoutEffect } from 'react';
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
-export default useIsomorphicLayoutEffect;
-//# sourceMappingURL=useIsomorphicLayoutEffect.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useIsomorphicLayoutEffect.d.ts","sourceRoot":"","sources":["../../lib/hooks/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAGxC,QAAA,MAAM,yBAAyB,wBACyB,CAAC;AAEzD,eAAe,yBAAyB,CAAC"}

package/dist/hooks/useIsomorphicLayoutEffect.js

@@ -1,5 +0,0 @@
-import { useLayoutEffect } from 'react';
-import { noop } from "../utils/index.js";
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : noop;
-export default useIsomorphicLayoutEffect;
-//# sourceMappingURL=useIsomorphicLayoutEffect.js.map

package/dist/hooks/useIsomorphicLayoutEffect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIsomorphicLayoutEffect.js","sourceRoot":"","sources":["../../lib/hooks/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,yBAAyB,GAC7B,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC;AAEzD,eAAe,yBAAyB,CAAC"}

package/dist/utils/index.d.ts

@@ -1,5 +0,0 @@
-import type { DependencyList } from 'react';
-export declare function noop(): void;
-export declare function isFunction(input: unknown): input is Function;
-export declare function depsAreEqual(prevDeps: DependencyList, deps: DependencyList): boolean;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,wBAAgB,IAAI,SAAK;AAGzB,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"}

package/dist/utils/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../lib/utils/index.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,IAAI,KAAI,CAAC;AAEzB,sEAAsE;AACtE,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"}

package/lib/hooks/useEventListener.ts

@@ -1,101 +0,0 @@
-/**
- * @file Based on {@link https://github.com/juliencrn/usehooks-ts}
- *
- * @license MIT
- * @copyright 2020 Julien CARON
- */
-
-import { useEffect, useRef } from 'react';
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect.ts';
-
-/**
- * Adds `handler` as a listener for the event `eventName` of `element`
- * (or `window` by default) with the provided `options` applied
- *
- * It is the user's responsibility to make sure `element` and `options` values
- * are correctly memoized!
- */
-
-// SVGElement Event based useEventListener interface
-function useEventListener<
-  K extends keyof SVGElementEventMap,
-  T extends SVGElement,
->(
-  eventName: K,
-  handler: (this: T, event: SVGElementEventMap[K]) => void,
-  element: T | null,
-  options?: boolean | AddEventListenerOptions,
-): void;
-
-// HTMLElement Event based useEventListener interface
-function useEventListener<
-  K extends keyof HTMLElementEventMap,
-  T extends HTMLElement,
->(
-  eventName: K,
-  handler: (this: T, event: HTMLElementEventMap[K]) => void,
-  element: T | null,
-  options?: boolean | AddEventListenerOptions,
-): void;
-
-// Document Event based useEventListener interface
-function useEventListener<K extends keyof DocumentEventMap>(
-  eventName: K,
-  handler: (this: Document, event: DocumentEventMap[K]) => void,
-  element: Document,
-  options?: boolean | AddEventListenerOptions,
-): void;
-
-// Window Event based useEventListener interface
-function useEventListener<K extends keyof WindowEventMap>(
-  eventName: K,
-  handler: (this: Window, event: WindowEventMap[K]) => void,
-  element?: Window,
-  options?: boolean | AddEventListenerOptions,
-): void;
-
-// Fallback overload for all other event targets and types
-function useEventListener<T extends EventTarget>(
-  eventName: string,
-  handler: (this: T, event: Event) => void,
-  element?: T | null,
-  options?: boolean | AddEventListenerOptions,
-): void;
-
-function useEventListener(
-  eventName: string,
-  handler: (this: EventTarget, event: Event) => void,
-  element?: EventTarget | null,
-  options?: boolean | AddEventListenerOptions,
-) {
-  // Create a ref that stores handler
-  const savedHandler = useRef(handler);
-
-  useIsomorphicLayoutEffect(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-
-  useEffect(() => {
-    if (element === null) {
-      // No element has been attached to the ref yet
-      return;
-    }
-
-    // Define the listening target
-    const targetElement = element ?? window;
-
-    // Create event listener that calls handler function stored in ref
-    const listener: typeof handler = function (event) {
-      savedHandler.current.call(this, event);
-    };
-
-    targetElement.addEventListener(eventName, listener, options);
-
-    // Remove event listener on cleanup
-    return () => {
-      targetElement.removeEventListener(eventName, listener, options);
-    };
-  }, [eventName, element, options]);
-}
-
-export default useEventListener;

package/lib/hooks/useForceUpdate.ts

@@ -1,40 +0,0 @@
-import { useReducer, useRef } from 'react';
-
-/**
- * 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.
- *
- * @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
- * [`useStateWithDeps`]({@link ./useStateWithDeps.ts}) or
- * [`useReducerWithDeps`]({@link ./useReducerWithDeps.ts}).
- *
- * 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 default function useForceUpdate(
-  callback?: () => void,
-): [() => void, bigint] {
-  // 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 [counter, forceUpdate] = useReducer((prev) => prev + 1n, 0n);
-  const counterRef = useRef(counter);
-  if (counter !== counterRef.current) {
-    counterRef.current = counter;
-    callback?.();
-  }
-  return [forceUpdate, counter];
-}

package/lib/hooks/useIsomorphicLayoutEffect.ts

@@ -1,7 +0,0 @@
-import { useLayoutEffect } from 'react';
-import { noop } from '../utils/index.ts';
-
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : noop;
-
-export default useIsomorphicLayoutEffect;