From 1af07aa35933f20e2eabde7158d25a1a9ba157c4 Mon Sep 17 00:00:00 2001 From: Michael Puehringer Date: Mon, 4 Apr 2022 07:26:17 +0200 Subject: [PATCH] Fixed setValue in useAsync hook --- dist/hooks/useAsync.d.ts.map | 2 +- dist/hooks/useAsync.js | 4 +++- dist/hooks/useAsync.js.map | 2 +- src/hooks/useAsync.tsx | 4 +++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/dist/hooks/useAsync.d.ts.map b/dist/hooks/useAsync.d.ts.map index 9528ed084..e2ac88b0d 100644 --- a/dist/hooks/useAsync.d.ts.map +++ b/dist/hooks/useAsync.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"useAsync.d.ts","sourceRoot":"","sources":["../../src/hooks/useAsync.tsx"],"names":[],"mappings":"AAIA,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG;IAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAAC,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAGnH,oBAAY,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ,uBAAwB,GAAG,EAAE,KAAK,GAAG;;;;;CAoDzD,CAAC"} \ No newline at end of file +{"version":3,"file":"useAsync.d.ts","sourceRoot":"","sources":["../../src/hooks/useAsync.tsx"],"names":[],"mappings":"AAIA,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,WAAW,CAAC,MAAM,CAAC,CAAC,GAAG;IAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAAC,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAGnH,oBAAY,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ,uBAAwB,GAAG,EAAE,KAAK,GAAG;;;;;CAsDzD,CAAC"} \ No newline at end of file diff --git a/dist/hooks/useAsync.js b/dist/hooks/useAsync.js index 7e3038f0d..712025acf 100644 --- a/dist/hooks/useAsync.js +++ b/dist/hooks/useAsync.js @@ -35,7 +35,8 @@ export const useAsync = (asyncFunction, immediate = null) => { // on every render, but only if asyncFunction changes. const execute = React.useCallback((...args) => { setStatus('pending'); - setValue(null); + // Do not unset the value, as we mostly want to retain the last value to avoid flickering, i.e. for "silent" updates. + // setValue(null); setError(null); const currentPromise = Promise.resolve(asyncFunction(...args)) .then((response) => { @@ -47,6 +48,7 @@ export const useAsync = (asyncFunction, immediate = null) => { }) .catch((e) => { if (currentPromise === latestPromiseRef.current) { + setValue(null); setError(e); setStatus('error'); } diff --git a/dist/hooks/useAsync.js.map b/dist/hooks/useAsync.js.map index 73886e55f..d77c1b017 100644 --- a/dist/hooks/useAsync.js.map +++ b/dist/hooks/useAsync.js.map @@ -1 +1 @@ -{"version":3,"file":"useAsync.js","sourceRoot":"","sources":["../../src/hooks/useAsync.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAQ3D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,aAAgB,EAChB,YAAkC,IAAI,EACtC,EAAE;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAiB,MAAM,CAAC,CAAC;IACnE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,IAAI,CAAC,CAAC;IACzD,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,EAAqB,CAAC;IAC3D,+CAA+C;IAC/C,uDAAuD;IACvD,wDAAwD;IACxD,sDAAsD;IACtD,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B,CAAC,GAAG,IAAsC,EAAE,EAAE;QAC5C,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;aAC3D,IAAI,CAAC,CAAC,QAAW,EAAE,EAAE;YACpB,IAAI,cAAc,KAAK,gBAAgB,CAAC,OAAO,EAAE;gBAC/C,QAAQ,CAAC,QAAQ,CAAC,CAAC;gBACnB,SAAS,CAAC,SAAS,CAAC,CAAC;aACtB;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,CAAI,EAAE,EAAE;YACd,IAAI,cAAc,KAAK,gBAAgB,CAAC,OAAO,EAAE;gBAC/C,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACZ,SAAS,CAAC,OAAO,CAAC,CAAC;aACpB;YACD,+DAA+D;YAC/D,MAAM,CAAC,CAAC;QACV,CAAC,CAAC,CAAC;QACL,gBAAgB,CAAC,OAAO,GAAG,cAAc,CAAC;QAC1C,OAAO,cAAc,CAAC;IACxB,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IACF,iDAAiD;IACjD,iDAAiD;IACjD,yBAAyB;IACzB,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,SAAS,EAAE;YACb,IAAI;gBACF,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;aACvB;YAAC,OAAO,CAAC,EAAE;gBACV,6BAA6B;aAC9B;SACF;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;AAC3C,CAAC,CAAC"} \ No newline at end of file +{"version":3,"file":"useAsync.js","sourceRoot":"","sources":["../../src/hooks/useAsync.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAQ3D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,aAAgB,EAChB,YAAkC,IAAI,EACtC,EAAE;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAiB,MAAM,CAAC,CAAC;IACnE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,IAAI,CAAC,CAAC;IACzD,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,EAAqB,CAAC;IAC3D,+CAA+C;IAC/C,uDAAuD;IACvD,wDAAwD;IACxD,sDAAsD;IACtD,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B,CAAC,GAAG,IAAsC,EAAE,EAAE;QAC5C,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,qHAAqH;QACrH,kBAAkB;QAClB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;aAC3D,IAAI,CAAC,CAAC,QAAW,EAAE,EAAE;YACpB,IAAI,cAAc,KAAK,gBAAgB,CAAC,OAAO,EAAE;gBAC/C,QAAQ,CAAC,QAAQ,CAAC,CAAC;gBACnB,SAAS,CAAC,SAAS,CAAC,CAAC;aACtB;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,CAAI,EAAE,EAAE;YACd,IAAI,cAAc,KAAK,gBAAgB,CAAC,OAAO,EAAE;gBAC/C,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACf,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACZ,SAAS,CAAC,OAAO,CAAC,CAAC;aACpB;YACD,+DAA+D;YAC/D,MAAM,CAAC,CAAC;QACV,CAAC,CAAC,CAAC;QACL,gBAAgB,CAAC,OAAO,GAAG,cAAc,CAAC;QAC1C,OAAO,cAAc,CAAC;IACxB,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IACF,iDAAiD;IACjD,iDAAiD;IACjD,yBAAyB;IACzB,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,SAAS,EAAE;YACb,IAAI;gBACF,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;aACvB;YAAC,OAAO,CAAC,EAAE;gBACV,6BAA6B;aAC9B;SACF;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;AAC3C,CAAC,CAAC"} \ No newline at end of file diff --git a/src/hooks/useAsync.tsx b/src/hooks/useAsync.tsx index 1f1367661..9f0afb23f 100644 --- a/src/hooks/useAsync.tsx +++ b/src/hooks/useAsync.tsx @@ -46,7 +46,8 @@ export const useAsync = any, E = Error, T = Await const execute = React.useCallback( (...args: Parameters) => { setStatus('pending'); - setValue(null); + // Do not unset the value, as we mostly want to retain the last value to avoid flickering, i.e. for "silent" updates. + // setValue(null); setError(null); const currentPromise = Promise.resolve(asyncFunction(...args)) .then((response: T) => { @@ -58,6 +59,7 @@ export const useAsync = any, E = Error, T = Await }) .catch((e: E) => { if (currentPromise === latestPromiseRef.current) { + setValue(null); setError(e); setStatus('error'); }