extra-react-hooks 0.8.6 → 0.8.8

package/README.md

@@ -71,7 +71,7 @@ function useEffectAsync(
 ```ts
 function useAbortableCallback<Args extends unknown[], Result>(
   callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>
-, deps: React.DependencyList
+, deps?: React.DependencyList
 ): (...args: [...args: Args, signal: AbortSignal | Falsy]) => Promise<Result>
 ```
 
@@ -83,6 +83,14 @@ function useUpdateEffect(
 ): void
 ```
 
+### useUpdateLayoutEffect
+```ts
+function useUpdateLayoutEffect(
+  effect: EffectCallback
+, deps?: React.DependencyList
+): void
+```
+
 ### useStateCycle
 ```ts
 function useStateCycle<T>(

package/lib/index.d.ts

@@ -8,6 +8,7 @@ export * from './use-unmount.js';
 export * from './use-effect-async.js';
 export * from './use-abortable-callback.js';
 export * from './use-update-effect.js';
+export * from './use-update-layout-effect.js';
 export * from './use-single-selection.js';
 export * from './use-multiple-selection.js';
 export * from './use-state-cycle.js';

package/lib/index.js

@@ -8,6 +8,7 @@ export * from './use-unmount.js';
 export * from './use-effect-async.js';
 export * from './use-abortable-callback.js';
 export * from './use-update-effect.js';
+export * from './use-update-layout-effect.js';
 export * from './use-single-selection.js';
 export * from './use-multiple-selection.js';
 export * from './use-state-cycle.js';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA"}

package/lib/use-abortable-callback.d.ts

@@ -1,2 +1,2 @@
 import { Falsy } from '@blackglory/prelude';
-export declare function useAbortableCallback<Args extends unknown[], Result>(callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>, deps: React.DependencyList): (...args: [...args: Args, signal: AbortSignal | Falsy]) => Promise<Result>;
+export declare function useAbortableCallback<Args extends unknown[], Result>(callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>, deps?: React.DependencyList): (...args: [...args: Args, signal: AbortSignal | Falsy]) => Promise<Result>;

package/lib/use-abortable-callback.js

@@ -11,6 +11,6 @@ export function useAbortableCallback(callback, deps) {
         signal.throwIfAborted();
         const realArgs = args.slice(0, -1);
         return await callback(...realArgs, signal);
-    }, [controller, ...deps]);
+    }, [controller]);
 }
 //# sourceMappingURL=use-abortable-callback.js.map

package/lib/use-abortable-callback.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-abortable-callback.js","sourceRoot":"","sources":["../src/use-abortable-callback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAG/D,MAAM,UAAU,oBAAoB,CAClC,QAAgF,EAChF,IAA0B;IAE1B,MAAM,UAAU,GAAG,kBAAkB,CACnC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAC3B,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,EAChC,IAAI,CACL,CAAA;IAED,OAAO,WAAW,CAAC,KAAK,EAAE,GAAG,IAAkD,EAAE,EAAE;QACjF,MAAM,MAAM,GAAG,gBAAgB,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAwB;YAC5C,UAAU,CAAC,MAAM;SAClB,CAAC,CAAA;QACF,MAAM,CAAC,cAAc,EAAE,CAAA;QAEvB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAS,CAAA;QAE1C,OAAO,MAAM,QAAQ,CAAC,GAAG,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,CAAC,CAAA;AAC3B,CAAC"}
+{"version":3,"file":"use-abortable-callback.js","sourceRoot":"","sources":["../src/use-abortable-callback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAG/D,MAAM,UAAU,oBAAoB,CAClC,QAAgF,EAChF,IAA2B;IAE3B,MAAM,UAAU,GAAG,kBAAkB,CACnC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAC3B,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,EAChC,IAAI,CACL,CAAA;IAED,OAAO,WAAW,CAAC,KAAK,EAAE,GAAG,IAAkD,EAAE,EAAE;QACjF,MAAM,MAAM,GAAG,gBAAgB,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAwB;YAC5C,UAAU,CAAC,MAAM;SAClB,CAAC,CAAA;QACF,MAAM,CAAC,cAAc,EAAE,CAAA;QAEvB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAS,CAAA;QAE1C,OAAO,MAAM,QAAQ,CAAC,GAAG,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;AAClB,CAAC"}

package/lib/use-update-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { EffectCallback } from 'react';
+export declare function useUpdateLayoutEffect(effect: EffectCallback, deps?: React.DependencyList): void;

package/lib/use-update-layout-effect.js

@@ -0,0 +1,11 @@
+import { useIsFirstRender } from './use-is-first-render.js';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+export function useUpdateLayoutEffect(effect, deps) {
+    const isFirstRender = useIsFirstRender();
+    useIsomorphicLayoutEffect(() => {
+        if (!isFirstRender()) {
+            return effect();
+        }
+    }, deps);
+}
+//# sourceMappingURL=use-update-layout-effect.js.map

package/lib/use-update-layout-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-update-layout-effect.js","sourceRoot":"","sources":["../src/use-update-layout-effect.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAA;AAE7E,MAAM,UAAU,qBAAqB,CACnC,MAAsB,EACtB,IAA2B;IAE3B,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IAExC,yBAAyB,CAAC,GAAG,EAAE;QAC7B,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YACrB,OAAO,MAAM,EAAE,CAAA;QACjB,CAAC;IACH,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}

package/package.json

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

package/src/index.ts

@@ -8,6 +8,7 @@ export * from './use-unmount.js'
 export * from './use-effect-async.js'
 export * from './use-abortable-callback.js'
 export * from './use-update-effect.js'
+export * from './use-update-layout-effect.js'
 export * from './use-single-selection.js'
 export * from './use-multiple-selection.js'
 export * from './use-state-cycle.js'

package/src/use-abortable-callback.ts

@@ -5,7 +5,7 @@ import { Falsy } from '@blackglory/prelude'
 
 export function useAbortableCallback<Args extends unknown[], Result>(
   callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>
-, deps: React.DependencyList
+, deps?: React.DependencyList
 ): (...args: [...args: Args, signal: AbortSignal | Falsy]) => Promise<Result> {
   const controller = useMemoWithCleanup(
     () => new AbortController()
@@ -23,5 +23,5 @@ export function useAbortableCallback<Args extends unknown[], Result>(
     const realArgs = args.slice(0, -1) as Args
 
     return await callback(...realArgs, signal)
-  }, [controller, ...deps])
+  }, [controller])
 }

package/src/use-update-layout-effect.ts

@@ -0,0 +1,16 @@
+import { EffectCallback } from 'react'
+import { useIsFirstRender } from './use-is-first-render.js'
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js'
+
+export function useUpdateLayoutEffect(
+  effect: EffectCallback
+, deps?: React.DependencyList
+): void {
+  const isFirstRender = useIsFirstRender()
+
+  useIsomorphicLayoutEffect(() => {
+    if (!isFirstRender()) {
+      return effect()
+    }
+  }, deps)
+}