extra-react-hooks 0.8.3 → 0.8.4

package/README.md

@@ -167,9 +167,17 @@ function useRenderCounter(): number
 
 ### useIIFE
 ```ts
-function useIIFE(iife: () => void, deps: React.DependencyList): void
+function useIIFE(
+  iife: (() => () => void)
+      | (() => void)
+, deps?: React.DependencyList
+): void
 ```
 
+[If you don't need an effect], then you probably need an IIFE.
+
+[If you don't need an effect]: https://react.dev/learn/you-might-not-need-an-effect
+
 ### useMemoWithCleanup
 ```ts
 function useMemoWithCleanup<T>(

package/lib/use-debounce.js

@@ -1,9 +1,10 @@
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import { setTimeout } from 'extra-timers';
+import { useIIFE } from './use-iife.js';
 export function useDebounce(fn, timeout, deps) {
     const fnRef = useRef(fn);
     const cancelTimeoutRef = useRef(undefined);
-    useEffect(() => {
+    useIIFE(() => {
         fnRef.current = fn;
     }, deps);
     return (...args) => {

package/lib/use-debounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-debounce.js","sourceRoot":"","sources":["../src/use-debounce.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,UAAU,WAAW,CACzB,EAA2B,EAC3B,OAAe,EACf,IAA2B;IAE3B,MAAM,KAAK,GAAG,MAAM,CAA0B,EAAE,CAAC,CAAA;IACjD,MAAM,gBAAgB,GAAG,MAAM,CAAa,SAAS,CAAC,CAAA;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,OAAO,GAAG,EAAE,CAAA;IACpB,CAAC,EAAE,IAAI,CAAC,CAAA;IAER,OAAO,CAAC,GAAG,IAAU,EAAQ,EAAE;;QAC7B,MAAA,gBAAgB,CAAC,OAAO,gEAAI,CAAA;QAE5B,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,GAAG,EAAE;YAClD,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,CAAA;YAEtB,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAA;QACtC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;AACH,CAAC"}
+{"version":3,"file":"use-debounce.js","sourceRoot":"","sources":["../src/use-debounce.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,MAAM,UAAU,WAAW,CACzB,EAA2B,EAC3B,OAAe,EACf,IAA2B;IAE3B,MAAM,KAAK,GAAG,MAAM,CAA0B,EAAE,CAAC,CAAA;IACjD,MAAM,gBAAgB,GAAG,MAAM,CAAa,SAAS,CAAC,CAAA;IAEtD,OAAO,CAAC,GAAG,EAAE;QACX,KAAK,CAAC,OAAO,GAAG,EAAE,CAAA;IACpB,CAAC,EAAE,IAAI,CAAC,CAAA;IAER,OAAO,CAAC,GAAG,IAAU,EAAQ,EAAE;;QAC7B,MAAA,gBAAgB,CAAC,OAAO,gEAAI,CAAA;QAE5B,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,GAAG,EAAE;YAClD,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,CAAA;YAEtB,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAA;QACtC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;AACH,CAAC"}

package/lib/use-finite-state-machine.js

@@ -1,10 +1,11 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo } from 'react';
 import { ObservableFiniteStateMachine } from 'extra-fsm';
 import { useForceUpdate } from './use-force-update.js';
+import { useIIFE } from './use-iife.js';
 export function useFiniteStateMachine(schema, initialState) {
     const forceUpdate = useForceUpdate();
     const fsm = useMemo(() => new ObservableFiniteStateMachine(schema, initialState), [schema, initialState]);
-    useEffect(() => {
+    useIIFE(() => {
         const observable = fsm.observeStateChanges();
         const subscription = observable.subscribe(() => forceUpdate());
         return () => subscription.unsubscribe();

package/lib/use-finite-state-machine.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-finite-state-machine.js","sourceRoot":"","sources":["../src/use-finite-state-machine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,4BAA4B,EAA6B,MAAM,WAAW,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAOtD,MAAM,UAAU,qBAAqB,CAInC,MAA+C,EAC/C,YAAmB;IAEnB,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,GAAG,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,IAAI,4BAA4B,CAAC,MAAM,EAAE,YAAY,CAAC,EAC5D,CAAC,MAAM,EAAE,YAAY,CAAC,CACvB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,GAAG,CAAC,mBAAmB,EAAE,CAAA;QAC5C,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAE9D,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,CAAA;IACzC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,GAAG,CAAA;AACZ,CAAC"}
+{"version":3,"file":"use-finite-state-machine.js","sourceRoot":"","sources":["../src/use-finite-state-machine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,4BAA4B,EAA6B,MAAM,WAAW,CAAA;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAOvC,MAAM,UAAU,qBAAqB,CAInC,MAA+C,EAC/C,YAAmB;IAEnB,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,GAAG,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,IAAI,4BAA4B,CAAC,MAAM,EAAE,YAAY,CAAC,EAC5D,CAAC,MAAM,EAAE,YAAY,CAAC,CACvB,CAAA;IAED,OAAO,CAAC,GAAG,EAAE;QACX,MAAM,UAAU,GAAG,GAAG,CAAC,mBAAmB,EAAE,CAAA;QAC5C,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAE9D,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,CAAA;IACzC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,GAAG,CAAA;AACZ,CAAC"}

package/lib/use-iife.d.ts

@@ -1 +1 @@
-export declare function useIIFE(iife: () => void, deps: React.DependencyList): void;
+export declare function useIIFE(iife: (() => () => void) | (() => void), deps?: React.DependencyList): void;

package/lib/use-iife.js

@@ -1,21 +1,26 @@
-import { useRef } from 'react';
-import { useIsFirstRender } from "./use-is-first-render.js";
+import { useLayoutEffect, useRef } from 'react';
+import { useIsFirstRender } from './use-is-first-render.js';
 export function useIIFE(iife, deps) {
-    const oldDeps = useRef([]);
+    var _a;
     const isFirstRender = useIsFirstRender();
-    if (isFirstRender()) {
-        iife();
-    }
-    else {
-        if (deps.length === oldDeps.current.length) {
-            if (deps.some((x, i) => x !== oldDeps.current[i])) {
-                iife();
-            }
-        }
-        else {
-            iife();
-        }
+    const oldDeps = useRef([]);
+    const cleanup = useRef(undefined);
+    useLayoutEffect(() => {
+        return () => {
+            var _a;
+            (_a = cleanup.current) === null || _a === void 0 ? void 0 : _a.call(cleanup);
+            cleanup.current = undefined;
+        };
+    }, []);
+    if (!deps ||
+        isFirstRender() ||
+        deps.length !== oldDeps.current.length ||
+        deps.some((x, i) => x !== oldDeps.current[i])) {
+        (_a = cleanup.current) === null || _a === void 0 ? void 0 : _a.call(cleanup);
+        cleanup.current = iife();
+        oldDeps.current = deps
+            ? [...deps]
+            : [];
     }
-    oldDeps.current = Array.from(deps);
 }
 //# sourceMappingURL=use-iife.js.map

package/lib/use-iife.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-iife.js","sourceRoot":"","sources":["../src/use-iife.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,gBAAgB,EAAE,iCAAmC;AAE9D,MAAM,UAAU,OAAO,CAAC,IAAgB,EAAE,IAA0B;IAClE,MAAM,OAAO,GAAG,MAAM,CAAuB,EAAE,CAAC,CAAA;IAChD,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IAExC,IAAI,aAAa,EAAE,EAAE,CAAC;QACpB,IAAI,EAAE,CAAA;IACR,CAAC;SAAM,CAAC;QACN,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YAC3C,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClD,IAAI,EAAE,CAAA;YACR,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,EAAE,CAAA;QACR,CAAC;IACH,CAAC;IAED,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACpC,CAAC"}
+{"version":3,"file":"use-iife.js","sourceRoot":"","sources":["../src/use-iife.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,MAAM,UAAU,OAAO,CACrB,IACkB,EAClB,IAA2B;;IAE3B,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IACxC,MAAM,OAAO,GAAG,MAAM,CAAuB,EAAE,CAAC,CAAA;IAChD,MAAM,OAAO,GAAG,MAAM,CAAsB,SAAS,CAAC,CAAA;IAEtD,eAAe,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE;;YACV,MAAA,OAAO,CAAC,OAAO,uDAAI,CAAA;YACnB,OAAO,CAAC,OAAO,GAAG,SAAS,CAAA;QAC7B,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,IACE,CAAC,IAAI;QACL,aAAa,EAAE;QACf,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,MAAM;QACtC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAC7C,CAAC;QACD,MAAA,OAAO,CAAC,OAAO,uDAAI,CAAA;QACnB,OAAO,CAAC,OAAO,GAAG,IAAI,EAAE,CAAA;QAExB,OAAO,CAAC,OAAO,GAAG,IAAI;YACN,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;YACX,CAAC,CAAC,EAAE,CAAA;IACtB,CAAC;AACH,CAAC"}

package/lib/use-media-query.js

@@ -1,9 +1,9 @@
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo } from 'react';
+import { useIIFE } from './use-iife.js';
 export function useMediaQuery(query) {
     const mediaQuery = useMemo(() => matchMedia(query), [query]);
     const [matches, setMatches] = useState(mediaQuery.matches);
-    useEffect(() => {
-        updateMatches();
+    useIIFE(() => {
         mediaQuery.addEventListener('change', updateMatches);
         return () => mediaQuery.removeEventListener('change', updateMatches);
         function updateMatches() {

package/lib/use-media-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-query.js","sourceRoot":"","sources":["../src/use-media-query.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,MAAM,UAAU,aAAa,CAAC,KAAa;IACzC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAC5D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,UAAU,CAAC,OAAO,CAAC,CAAA;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;QAEf,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QACpD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QAEpE,SAAS,aAAa;YACpB,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"use-media-query.js","sourceRoot":"","sources":["../src/use-media-query.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,MAAM,UAAU,aAAa,CAAC,KAAa;IACzC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAC5D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,UAAU,CAAC,OAAO,CAAC,CAAA;IAEnE,OAAO,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QACpD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;QAEpE,SAAS,aAAa;YACpB,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/lib/use-memo-with-cleanup.js

@@ -1,7 +1,8 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo } from 'react';
+import { useIIFE } from './use-iife.js';
 export function useMemoWithCleanup(factory, cleanup, deps) {
     const value = useMemo(factory, deps);
-    useEffect(() => {
+    useIIFE(() => {
         return () => cleanup(value);
     }, deps);
     return value;

package/lib/use-memo-with-cleanup.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-memo-with-cleanup.js","sourceRoot":"","sources":["../src/use-memo-with-cleanup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE1C,MAAM,UAAU,kBAAkB,CAChC,OAAgB,EAChB,OAA2B,EAC3B,IAA2B;IAE3B,MAAM,KAAK,GAAG,OAAO,CACnB,OAAO,EAEP,IAAI,CACL,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC,EAAE,IAAI,CAAC,CAAA;IAER,OAAO,KAAK,CAAA;AACd,CAAC"}
+{"version":3,"file":"use-memo-with-cleanup.js","sourceRoot":"","sources":["../src/use-memo-with-cleanup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,MAAM,UAAU,kBAAkB,CAChC,OAAgB,EAChB,OAA2B,EAC3B,IAA2B;IAE3B,MAAM,KAAK,GAAG,OAAO,CACnB,OAAO,EAEP,IAAI,CACL,CAAA;IAED,OAAO,CAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC,EAAE,IAAI,CAAC,CAAA;IAER,OAAO,KAAK,CAAA;AACd,CAAC"}

package/lib/use-number-input.js

@@ -1,19 +1,20 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { isntNaN } from 'extra-utils';
+import { useIIFE } from './use-iife.js';
 export function useNumberInput({ value, lazy, onChange }) {
     const [displayValue, setDisplayValue] = useState(() => value.toString());
-    useEffect(() => {
+    useIIFE(() => {
         if (!lazy) {
             const oldValue = Number(displayValue);
             if (oldValue !== value)
                 setDisplayValue(value.toString());
         }
-    }, [value, displayValue]);
-    useEffect(() => {
+    }, [lazy, value, displayValue]);
+    useIIFE(() => {
         if (lazy) {
             setDisplayValue(value.toString());
         }
-    }, [value]);
+    }, [lazy, value]);
     return {
         getInputProps() {
             return {

package/lib/use-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-number-input.js","sourceRoot":"","sources":["../src/use-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAKrD;IAQC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;IAEhF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;YAGrC,IAAI,QAAQ,KAAK,KAAK;gBAAE,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC3D,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAA;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YAGT,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO;QACL,aAAa;YACX,OAAO;gBACL,KAAK,EAAE,YAAY;gBACnB,QAAQ,CAAC,CAAC;oBACR,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAE/B,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC;wBAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;4BAEvC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;gCAC5C,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;4BAC3B,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;gBACD,MAAM,CAAC,CAAC;oBACN,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC;wBAC7B,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;wBAEvC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,CAAC,EAAE,CAAC;4BACvD,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;4BAIxB,eAAe,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;4BAEpC,OAAM;wBACR,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;4BAErB,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;4BAEjC,OAAM;wBACR,CAAC;oBACH,CAAC;oBAGD,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;gBACnC,CAAC;aACF,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC"}
+{"version":3,"file":"use-number-input.js","sourceRoot":"","sources":["../src/use-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAKrD;IAQC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;IAEhF,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;YAGrC,IAAI,QAAQ,KAAK,KAAK;gBAAE,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC3D,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAA;IAE/B,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,EAAE,CAAC;YAGT,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAEjB,OAAO;QACL,aAAa;YACX,OAAO;gBACL,KAAK,EAAE,YAAY;gBACnB,QAAQ,CAAC,CAAC;oBACR,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBAE/B,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,CAAC;wBAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;4BAEvC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;gCAC5C,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;4BAC3B,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;gBACD,MAAM,CAAC,CAAC;oBACN,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC;wBAC7B,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;wBAEvC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,KAAK,CAAC,EAAE,CAAC;4BACvD,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;4BAIxB,eAAe,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;4BAEpC,OAAM;wBACR,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,IAAI,EAAE,CAAC;4BACV,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;4BAErB,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;4BAEjC,OAAM;wBACR,CAAC;oBACH,CAAC;oBAGD,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;gBACnC,CAAC;aACF,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "",
   "keywords": [],
   "files": [

package/src/use-debounce.ts

@@ -1,5 +1,6 @@
-import { useRef, useEffect } from 'react'
+import { useRef } from 'react'
 import { setTimeout } from 'extra-timers'
+import { useIIFE } from './use-iife.js'
 
 export function useDebounce<Args extends unknown[]>(
   fn: (...args: Args) => void
@@ -9,7 +10,7 @@ export function useDebounce<Args extends unknown[]>(
   const fnRef = useRef<(...args: Args) => void>(fn)
   const cancelTimeoutRef = useRef<() => void>(undefined)
 
-  useEffect(() => {
+  useIIFE(() => {
     fnRef.current = fn
   }, deps)
 

package/src/use-finite-state-machine.ts

@@ -1,6 +1,7 @@
-import { useMemo, useEffect } from 'react'
+import { useMemo } from 'react'
 import { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm'
 import { useForceUpdate } from './use-force-update.js'
+import { useIIFE } from './use-iife.js'
 
 export type {
   ObservableFiniteStateMachine
@@ -20,7 +21,7 @@ export function useFiniteStateMachine<
   , [schema, initialState]
   )
 
-  useEffect(() => {
+  useIIFE(() => {
     const observable = fsm.observeStateChanges()
     const subscription = observable.subscribe(() => forceUpdate())
 

package/src/use-iife.ts

@@ -1,21 +1,33 @@
-import { useRef } from 'react'
-import { useIsFirstRender } from '@src/use-is-first-render.js'
+import { useLayoutEffect, useRef } from 'react'
+import { useIsFirstRender } from './use-is-first-render.js'
 
-export function useIIFE(iife: () => void, deps: React.DependencyList): void {
-  const oldDeps = useRef<React.DependencyList>([])
+export function useIIFE(
+  iife: (() => () => void)
+      | (() => void)
+, deps?: React.DependencyList
+): void {
   const isFirstRender = useIsFirstRender()
+  const oldDeps = useRef<React.DependencyList>([])
+  const cleanup = useRef<(() => void) | void>(undefined)
 
-  if (isFirstRender()) {
-    iife()
-  } else {
-    if (deps.length === oldDeps.current.length) {
-      if (deps.some((x, i) => x !== oldDeps.current[i])) {
-        iife()
-      }
-    } else {
-      iife()
+  useLayoutEffect(() => {
+    return () => {
+      cleanup.current?.()
+      cleanup.current = undefined
     }
-  }
+  }, [])
 
-  oldDeps.current = Array.from(deps)
+  if (
+    !deps ||
+    isFirstRender() ||
+    deps.length !== oldDeps.current.length ||
+    deps.some((x, i) => x !== oldDeps.current[i])
+  ) {
+    cleanup.current?.()
+    cleanup.current = iife()
+
+    oldDeps.current = deps
+                    ? [...deps]
+                    : []
+  }
 }

package/src/use-media-query.ts

@@ -1,12 +1,11 @@
-import { useState, useMemo, useEffect } from 'react'
+import { useState, useMemo } from 'react'
+import { useIIFE } from './use-iife.js'
 
 export function useMediaQuery(query: string): boolean {
   const mediaQuery = useMemo(() => matchMedia(query), [query])
   const [matches, setMatches] = useState<boolean>(mediaQuery.matches)
 
-  useEffect(() => {
-    updateMatches()
-
+  useIIFE(() => {
     mediaQuery.addEventListener('change', updateMatches)
     return () => mediaQuery.removeEventListener('change', updateMatches)
 

package/src/use-memo-with-cleanup.ts

@@ -1,4 +1,5 @@
-import { useMemo, useEffect } from 'react'
+import { useMemo } from 'react'
+import { useIIFE } from './use-iife.js'
 
 export function useMemoWithCleanup<T>(
   factory: () => T
@@ -11,7 +12,7 @@ export function useMemoWithCleanup<T>(
   , deps
   )
 
-  useEffect(() => {
+  useIIFE(() => {
     return () => cleanup(value)
   }, deps)
 

package/src/use-number-input.ts

@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { isntNaN } from 'extra-utils'
+import { useIIFE } from './use-iife.js'
 
 export function useNumberInput({ value, lazy, onChange }: {
   value: number
@@ -16,22 +17,22 @@ export function useNumberInput({ value, lazy, onChange }: {
 } {
   const [displayValue, setDisplayValue] = useState<string>(() => value.toString())
 
-  useEffect(() => {
+  useIIFE(() => {
     if (!lazy) {
       const oldValue = Number(displayValue)
 
       // 以传入的值为准, 但只有在实际代表的值不同时, 才更新.
       if (oldValue !== value) setDisplayValue(value.toString())
     }
-  }, [value, displayValue])
+  }, [lazy, value, displayValue])
 
-  useEffect(() => {
+  useIIFE(() => {
     if (lazy) {
       // 以传入的值为准.
       // 由于onChange是惰性调用, 不需要检查值的相等性.
       setDisplayValue(value.toString())
     }
-  }, [value])
+  }, [lazy, value])
 
   return {
     getInputProps() {