@squiz/generic-browser-lib 1.66.0 → 1.67.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @squiz/generic-browser-lib
 
+## 1.67.0
+
+### Minor Changes
+
+- 7c324d7: Added ignorePrevious option to useAsync hook (to ignore previous data)
+
 ## 1.66.0
 
 ### Minor Changes

package/lib/Hooks/useAsync.d.ts

@@ -4,6 +4,8 @@ export type UseAsyncProps<TReturnType, TDefaultValueType> = {
     callback: (() => TReturnType | Promise<TReturnType>) | Array<() => TReturnType | Promise<TReturnType>>;
     /** The default value to populate the data as when initially mounted or reloading data. */
     defaultValue: TReturnType | TDefaultValueType;
+    /** Optional toggle to ignore previous async callback data */
+    ignorePrevious?: boolean;
 };
 /**
  * Hook for invoking async code and keeping track of its state.
@@ -13,7 +15,7 @@ export type UseAsyncProps<TReturnType, TDefaultValueType> = {
  * 2. When any of the `deps` change.
  * 3. When the `reload` function is called.
  */
-export declare const useAsync: <TReturnType, TDefaultValueType>({ callback, defaultValue }: UseAsyncProps<TReturnType, TDefaultValueType>, deps: DependencyList) => {
+export declare const useAsync: <TReturnType, TDefaultValueType>({ callback, defaultValue, ignorePrevious }: UseAsyncProps<TReturnType, TDefaultValueType>, deps: DependencyList) => {
     data: TReturnType | TDefaultValueType;
     error: Error | null;
     isLoading: boolean;

package/lib/Hooks/useAsync.js

@@ -10,14 +10,16 @@ const react_1 = require("react");
  * 2. When any of the `deps` change.
  * 3. When the `reload` function is called.
  */
-const useAsync = ({ callback, defaultValue }, deps) => {
+const useAsync = ({ callback, defaultValue, ignorePrevious = false }, deps) => {
     const [data, setData] = (0, react_1.useState)(defaultValue);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
+    const requestCountRef = (0, react_1.useRef)(0);
     const reload = (0, react_1.useCallback)(() => {
         setIsLoading(true);
         setError(null);
         setData(defaultValue);
+        const currentRequestCount = ignorePrevious ? ++requestCountRef.current : 0;
         try {
             const isArrayOfCallbacks = Array.isArray(callback);
             const promises = isArrayOfCallbacks ? callback.map((cb) => cb()) : [callback()];
@@ -29,12 +31,18 @@ const useAsync = ({ callback, defaultValue }, deps) => {
             }
             Promise.all(promises)
                 .then((resolved) => {
-                setData(isArrayOfCallbacks ? resolved : resolved[0]);
-                setIsLoading(false);
+                // If ignorePrevious is set to TRUE we only set the new data if it's the most recent request
+                // and not a previous request that has taken longer than expected.
+                if (!ignorePrevious || currentRequestCount === requestCountRef.current) {
+                    setData(isArrayOfCallbacks ? resolved : resolved[0]);
+                    setIsLoading(false);
+                }
             })
                 .catch((e) => {
-                setError(e instanceof Error ? e : new Error(String(e)));
-                setIsLoading(false);
+                if (!ignorePrevious || currentRequestCount === requestCountRef.current) {
+                    setError(e instanceof Error ? e : new Error(String(e)));
+                    setIsLoading(false);
+                }
             });
         }
         catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.66.0",
+  "version": "1.67.0",
   "description": "Package with reusable components used by resource/component browsers",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/Hooks/useAsync.spec.ts

@@ -3,9 +3,10 @@ import { renderHook, waitFor } from '@testing-library/react';
 import { useAsync } from './useAsync';
 
 describe('useAsync', () => {
-  const renderAsyncHook = (callback: () => any | [], deps: DependencyList) => {
+  const renderAsyncHook = (callback: () => any | [], deps: DependencyList, ignorePrevious = false) => {
     return renderHook(
-      ({ deps }: { deps: DependencyList }) => useAsync({ callback, defaultValue: 'Initial state' }, deps),
+      ({ deps }: { deps: DependencyList }) =>
+        useAsync({ callback, defaultValue: 'Initial state', ignorePrevious }, deps),
       { initialProps: { deps } },
     );
   };

package/src/Hooks/useAsync.ts

@@ -1,10 +1,12 @@
-import { DependencyList, useState, useCallback, useEffect } from 'react';
+import { DependencyList, useState, useCallback, useEffect, useRef } from 'react';
 
 export type UseAsyncProps<TReturnType, TDefaultValueType> = {
   /** The async callback or an array of async callbacks to call for fetching data. */
   callback: (() => TReturnType | Promise<TReturnType>) | Array<() => TReturnType | Promise<TReturnType>>;
   /** The default value to populate the data as when initially mounted or reloading data. */
   defaultValue: TReturnType | TDefaultValueType;
+  /** Optional toggle to ignore previous async callback data */
+  ignorePrevious?: boolean;
 };
 
 /**
@@ -16,18 +18,21 @@ export type UseAsyncProps<TReturnType, TDefaultValueType> = {
  * 3. When the `reload` function is called.
  */
 export const useAsync = <TReturnType, TDefaultValueType>(
-  { callback, defaultValue }: UseAsyncProps<TReturnType, TDefaultValueType>,
+  { callback, defaultValue, ignorePrevious = false }: UseAsyncProps<TReturnType, TDefaultValueType>,
   deps: DependencyList,
 ) => {
   const [data, setData] = useState(defaultValue);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  const requestCountRef = useRef(0);
 
   const reload = useCallback(() => {
     setIsLoading(true);
     setError(null);
     setData(defaultValue);
 
+    const currentRequestCount = ignorePrevious ? ++requestCountRef.current : 0;
+
     try {
       const isArrayOfCallbacks = Array.isArray(callback);
       const promises = isArrayOfCallbacks ? callback.map((cb) => cb()) : [callback()];
@@ -41,12 +46,18 @@ export const useAsync = <TReturnType, TDefaultValueType>(
 
       Promise.all(promises)
         .then((resolved: TReturnType[]) => {
-          setData(isArrayOfCallbacks ? (resolved as TReturnType) : resolved[0]);
-          setIsLoading(false);
+          // If ignorePrevious is set to TRUE we only set the new data if it's the most recent request
+          // and not a previous request that has taken longer than expected.
+          if (!ignorePrevious || currentRequestCount === requestCountRef.current) {
+            setData(isArrayOfCallbacks ? (resolved as TReturnType) : resolved[0]);
+            setIsLoading(false);
+          }
         })
         .catch((e: unknown) => {
-          setError(e instanceof Error ? e : new Error(String(e)));
-          setIsLoading(false);
+          if (!ignorePrevious || currentRequestCount === requestCountRef.current) {
+            setError(e instanceof Error ? e : new Error(String(e)));
+            setIsLoading(false);
+          }
         });
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)));