react-async-hook - npm Package Compare versions

Comparing version 3.5.2 to 3.5.3

dist/react-async-hook.cjs.development.js

@@ -218,3 +218,2 @@ 'use strict';
       normalizedOptions.executeOnMount && executeAsyncOperation.apply(void 0, params);
-      normalizedOptions.executeOnMount && executeAsyncOperation.apply(void 0, params);
     } else {
@@ -221,0 +220,0 @@ normalizedOptions.executeOnUpdate && executeAsyncOperation.apply(void 0, params);

dist/react-async-hook.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var r=require("react");function t(){return(t=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r}).apply(this,arguments)}"undefined"!=typeof Symbol&&(Symbol.iterator||(Symbol.iterator=Symbol("Symbol.iterator"))),"undefined"!=typeof Symbol&&(Symbol.asyncIterator||(Symbol.asyncIterator=Symbol("Symbol.asyncIterator")));var e={status:"not-requested",loading:!1,result:void 0,error:void 0},n={status:"loading",loading:!0,result:void 0,error:void 0},u=function(){},o={initialState:function(r){return r&&r.executeOnMount?n:e},executeOnMount:!0,executeOnUpdate:!0,setLoading:function(r){return n},setResult:function(r,t){return{status:"success",loading:!1,result:r,error:void 0}},setError:function(r,t){return{status:"error",loading:!1,result:void 0,error:r}},onSuccess:u,onError:u},i=function(e,n,u){var i,s=function(r){return t({},o,{},r)}(u),c=r.useState(null),a=c[0],l=c[1],f=function(t){var e=r.useState(function(){return t.initialState(t)}),n=e[0],u=e[1],o=r.useCallback(function(){return u(t.initialState(t))},[u,t]),i=r.useCallback(function(){return u(t.setLoading(n))},[n,u]),s=r.useCallback(function(r){return u(t.setResult(r,n))},[n,u]),c=r.useCallback(function(r){return u(t.setError(r,n))},[n,u]);return{value:n,set:u,reset:o,setLoading:i,setResult:s,setError:c}}(s),v=(i=r.useRef(!1),r.useEffect(function(){return i.current=!0,function(){i.current=!1}},[]),function(){return i.current}),d=function(){var t=r.useRef(null);return{set:function(r){return t.current=r},get:function(){return t.current},is:function(r){return t.current===r}}}(),y=function(r){return v()&&d.is(r)},b=function(){for(var r=arguments.length,t=new Array(r),n=0;n<r;n++)t[n]=arguments[n];var u=e.apply(void 0,t);if(l(t),u instanceof Promise)return d.set(u),f.setLoading(),u.then(function(r){y(u)&&f.setResult(r),s.onSuccess(r,{isCurrent:function(){return d.is(u)}})},function(r){y(u)&&f.setError(r),s.onError(r,{isCurrent:function(){return d.is(u)}})}),u;var o=u;return f.setResult(o),Promise.resolve(o)},p=!v();return r.useEffect(function(){p?(s.executeOnMount&&b.apply(void 0,n),s.executeOnMount&&b.apply(void 0,n)):s.executeOnUpdate&&b.apply(void 0,n)},n),t({},f.value,{set:f.set,reset:f.reset,execute:b,currentPromise:d.get(),currentParams:a})};function s(r,t,e){return i(r,t,e)}exports.useAsync=s,exports.useAsyncAbortable=function(t,e,n){var u=r.useRef();return s(function(){for(var r=arguments.length,e=new Array(r),n=0;n<r;n++)e[n]=arguments[n];try{u.current&&u.current.abort();var o=new AbortController;return u.current=o,Promise.resolve(function(r,n){try{var u=Promise.resolve(t.apply(void 0,[o.signal].concat(e)))}catch(r){return n(!0,r)}return u&&u.then?u.then(n.bind(null,!1),n.bind(null,!0)):n(!1,value)}(0,function(r,t){if(u.current===o&&(u.current=void 0),r)throw t;return t}))}catch(r){return Promise.reject(r)}},e,n)},exports.useAsyncCallback=function(r,e){return i(r,[],t({},e,{executeOnMount:!1,executeOnUpdate:!1}))};
+"use strict";var r=require("react");function t(){return(t=Object.assign||function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r}).apply(this,arguments)}"undefined"!=typeof Symbol&&(Symbol.iterator||(Symbol.iterator=Symbol("Symbol.iterator"))),"undefined"!=typeof Symbol&&(Symbol.asyncIterator||(Symbol.asyncIterator=Symbol("Symbol.asyncIterator")));var e={status:"not-requested",loading:!1,result:void 0,error:void 0},n={status:"loading",loading:!0,result:void 0,error:void 0},u=function(){},o={initialState:function(r){return r&&r.executeOnMount?n:e},executeOnMount:!0,executeOnUpdate:!0,setLoading:function(r){return n},setResult:function(r,t){return{status:"success",loading:!1,result:r,error:void 0}},setError:function(r,t){return{status:"error",loading:!1,result:void 0,error:r}},onSuccess:u,onError:u},s=function(e,n,u){var s,i=function(r){return t({},o,{},r)}(u),c=r.useState(null),a=c[0],l=c[1],f=function(t){var e=r.useState(function(){return t.initialState(t)}),n=e[0],u=e[1],o=r.useCallback(function(){return u(t.initialState(t))},[u,t]),s=r.useCallback(function(){return u(t.setLoading(n))},[n,u]),i=r.useCallback(function(r){return u(t.setResult(r,n))},[n,u]),c=r.useCallback(function(r){return u(t.setError(r,n))},[n,u]);return{value:n,set:u,reset:o,setLoading:s,setResult:i,setError:c}}(i),v=(s=r.useRef(!1),r.useEffect(function(){return s.current=!0,function(){s.current=!1}},[]),function(){return s.current}),d=function(){var t=r.useRef(null);return{set:function(r){return t.current=r},get:function(){return t.current},is:function(r){return t.current===r}}}(),y=function(r){return v()&&d.is(r)},b=function(){for(var r=arguments.length,t=new Array(r),n=0;n<r;n++)t[n]=arguments[n];var u=e.apply(void 0,t);if(l(t),u instanceof Promise)return d.set(u),f.setLoading(),u.then(function(r){y(u)&&f.setResult(r),i.onSuccess(r,{isCurrent:function(){return d.is(u)}})},function(r){y(u)&&f.setError(r),i.onError(r,{isCurrent:function(){return d.is(u)}})}),u;var o=u;return f.setResult(o),Promise.resolve(o)},p=!v();return r.useEffect(function(){p?i.executeOnMount&&b.apply(void 0,n):i.executeOnUpdate&&b.apply(void 0,n)},n),t({},f.value,{set:f.set,reset:f.reset,execute:b,currentPromise:d.get(),currentParams:a})};function i(r,t,e){return s(r,t,e)}exports.useAsync=i,exports.useAsyncAbortable=function(t,e,n){var u=r.useRef();return i(function(){for(var r=arguments.length,e=new Array(r),n=0;n<r;n++)e[n]=arguments[n];try{u.current&&u.current.abort();var o=new AbortController;return u.current=o,Promise.resolve(function(r,n){try{var u=Promise.resolve(t.apply(void 0,[o.signal].concat(e)))}catch(r){return n(!0,r)}return u&&u.then?u.then(n.bind(null,!1),n.bind(null,!0)):n(!1,value)}(0,function(r,t){if(u.current===o&&(u.current=void 0),r)throw t;return t}))}catch(r){return Promise.reject(r)}},e,n)},exports.useAsyncCallback=function(r,e){return s(r,[],t({},e,{executeOnMount:!1,executeOnUpdate:!1}))};
 //# sourceMappingURL=react-async-hook.cjs.production.min.js.map

dist/react-async-hook.esm.js

@@ -216,3 +216,2 @@ import { useRef, useState, useEffect, useCallback } from 'react';
       normalizedOptions.executeOnMount && executeAsyncOperation.apply(void 0, params);
-      normalizedOptions.executeOnMount && executeAsyncOperation.apply(void 0, params);
     } else {
@@ -219,0 +218,0 @@ normalizedOptions.executeOnUpdate && executeAsyncOperation.apply(void 0, params);

package.json

 {
   "name": "react-async-hook",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "description": "Async hook",
@@ -5,0 +5,0 @@ "author": "Sébastien Lorber",

README.md

@@ -250,2 +250,44 @@ # React-async-hook
 
+#### How to have better control when things get fetched/refetched?
+
+Sometimes you end up in situations where the function tries to fetch too often, or not often, because your dependency array changes and you don't know how to handle this.
+
+In this case you'd better use a closure with no arg define in the dependency array which params should trigger a refetch:
+
+Here, both `state.a` and `state.b` will trigger a refetch, despite b is not passed to the async fetch function.
+
+```tsx
+const asyncSomething = useAsync(() => fetchSomething(state.a), [state.a,state.b]);
+```
+
+Here, only `state.a` will trigger a refetch, despite b being passed to the async fetch function.
+
+```tsx
+const asyncSomething = useAsync(() => fetchSomething(state.a, state.b), [state.a]);
+```
+
+Note you can also use this to "build" a more complex payload. Using `useMemo` does not guarantee the memoized value will not be cleared, so it's better to do:
+
+```tsx
+const asyncSomething = useAsync(async () => {
+  const payload = buildFetchPayload(state);
+  const result = await fetchSomething(payload);
+  return result;
+}), [state.a, state.b, state.whateverNeedToTriggerRefetch]);
+```
+
+You can also use `useAsyncCallback` to decide yourself manually when a fetch should be done:
+
+```tsx
+const asyncSomething = useAsyncCallback(async () => {
+  const payload = buildFetchPayload(state);
+  const result = await fetchSomething(payload);
+  return result;
+}));
+
+// Call this manually whenever you need:
+asyncSomething.execute();
+```
+
+
 #### How to support retry?
@@ -252,0 +294,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

148984

increased by0.6%

Number of lines in readme file

304

increased by16.03%

Worsened metrics

Lines of code

544

decreased by-0.37%

No dependency changes