[FIX] usePromiseSuspensible cache logic

Author: nDriaDev

README.md

@@ -852,9 +852,9 @@ usePopover({ mode, onBeforeToggle, onToggle }: UsePopoverProps): UsePopoverResul
 
 ### usePromiseSuspensible
 
-Hook to resolve promise with Suspense support. The component that uses it, it need to be wrapped with Suspense component. [See demo](https://ndriadev.github.io/react-tools/#/hooks/api-dom/usePromiseSuspensible)
+Hook to resolve promise with Suspense support. The component that uses it, it need to be wrapped with Suspense component. This hook can be used in conditional blocks. [See demo](https://ndriadev.github.io/react-tools/#/hooks/api-dom/usePromiseSuspensible)
 ```tsx
-usePromiseSuspensible<T extends (...args: unknown[]) => Promise<unknown>>(promise: T, deps: DependencyList, options: { clearCacheOnUnmount?: boolean } = {clearCacheOnUnmount: false}): Awaited<ReturnType<T>>
+usePromiseSuspensible<T>(promise: ()=>Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean } = {}): Awaited<ReturnType<typeof promise>>
 ```
 
 ### usePublishSubscribe
@@ -1281,10 +1281,17 @@ To validate dependencies of custom hooks like `useMemoCompare`, configure `exhau
   	"rules": {
     	// ...
     	"react-hooks/exhaustive-deps": [
-			"warn", {
+			"warn",
+            {
 				"additionalHooks": "(useMemoCompare|useMemoDeepCompare|useCallbackCompare|useCallbackDeepCompare|useLayoutEffectCompare|useLayoutEffectDeepCompare|useInsertionEffectCompare|useInsertionEffectDeepCompare|useEffectCompare|useEffectDeepCompare|usePromiseSuspensible)"
   		  	}
 		]
+    	"react-hooks/rules-of-hooks": [
+			"of",
+            {
+				"additionalHooks": "(usePromiseSuspensible)"
+  		  	}
+		]
 	}
 }
 ```

apps/react-tools-demo/.eslintrc.cjs

@@ -25,6 +25,12 @@ module.exports = {
 			{
 				"additionalHooks": "(useMemoCompare|useMemoDeepCompare|useCallbackCompare|useCallbackDeepCompare|useLayoutEffectCompare|useLayoutEffectDeepCompare|useInsertionEffectCompare|useInsertionEffectDeepCompare|useEffectCompare|useEffectDeepCompare|usePromiseSuspensible)"
 			}
+		],
+		"react-hooks/rules-of-hooks": [
+			"off",
+			{
+				"additionalHooks": "(usePromiseSuspensible)"
+			}
 		]
 	},
 }

apps/react-tools-demo/src/markdown/usePromiseSuspensible.md

@@ -5,18 +5,29 @@ Hook to resolve promise with Suspense support. The component that uses it, it ne
 
 ```tsx
 const Delayed = () => {
-	const data = usePromiseSuspensible(() => {
-		return new Promise<number[]>((res, rej) => {
-			console.log("called")
-			setTimeout(() => {
-				Math.random() > 0.5
-					? res([1, 2, 3, 4, 5])
-					: rej();
-			},4000)
-		}).catch(() => alert("Error throwed by promise"))
-	}, []);
-
-	return <pre>{JSON.stringify(data)}</pre>;
+	const data = usePromiseSuspensible(
+		() => {
+			return new Promise<number[]>((res, rej) => {
+				console.log("called")
+				setTimeout(() => {
+					Math.random() > 0.5
+						? res([1, 2, 3, 4, 5])
+						: rej("Error throwed by promise");
+				},4000)
+			}).catch((err) => {
+				alert(err);
+				return [0,0,0]
+			})
+		},
+		[],
+		{
+			cache: "unmount"
+		}
+	);
+
+	return <>
+		<pre>{JSON.stringify(data)}</pre>
+	</>;
 }
 
 export const UsePromiseSuspensible = () => {
@@ -32,7 +43,7 @@ export const UsePromiseSuspensible = () => {
 ## API
 
 ```tsx
-usePromiseSuspensible<T extends (...args: unknown[]) => Promise<unknown>>(promise: T, deps: DependencyList, options: { clearCacheOnUnmount?: boolean } = {clearCacheOnUnmount: false}): Awaited<ReturnType<T>>
+usePromiseSuspensible<T extends (...args: unknown[]) => Promise<unknown>>(promise: T, deps: DependencyList, options: { cache?: "unmount" | number } = {}): Awaited<ReturnType<T>>
 ```
 
 
@@ -44,8 +55,8 @@ Function that returns a promise to suspense.
 DependencyList for promise to suspense.
 > - __options?__: _{ clearCacheOnUnmount?: boolean }_  
 optional options.
-> - __options.clearCacheOnUnmount=false?__: _boolean_  
-if value is true, promise cached will be cleaned on unmount phase.
+> - __options.cache=undefined?__: _"unmount"|number_  
+value can be "unmount", to clean promise cached at component unmounting, or it can be the duration in millisecond of cached promise.
 >
 
 

apps/react-tools-demo/src/pages/hooks/api-dom/usePromiseSuspensible/UsePromiseSuspensible.tsx

@@ -1,27 +1,25 @@
-import { Suspense } from "react"
-import { usePromiseSuspensible } from "../../../../../../../packages/react-tools-lib/src";
+import { Suspense, useCallback } from "react"
+import { ErrorBoundary, usePromiseSuspensible } from "../../../../../../../packages/react-tools-lib/src";
 
 /**
 The _Delayed_ component uses _usePromiseSuspensible_ hook to call a promise that resolves with an array of number or reject: if promise has been resolved, array number is rendered, otherwise an alert is invocked. Delayed component is returned from _UsePromiseSuspensible_ component.
  */
 const Delayed = () => {
 	const data = usePromiseSuspensible(
-		() => {
-			return new Promise<number[]>((res, rej) => {
-				console.log("called")
+		async () => {
+			return await new Promise<number[]>((res, rej) => {
+				console.log("called");
 				setTimeout(() => {
 					Math.random() > 0.5
 						? res([1, 2, 3, 4, 5])
 						: rej("Error throwed by promise");
-				},4000)
-			}).catch((err) => {
-				alert(err);
-				throw err;
-			})
+				}, 4000);
+			});
 		},
 		[],
 		{
-			cache: "unmount"
+			cache: 25, //25 seconds
+			cleanOnError: true
 		}
 	);
 
@@ -31,7 +29,13 @@ const Delayed = () => {
 }
 
 export const UsePromiseSuspensible = () => {
-	return <Suspense fallback="loading...">
-		<Delayed/>
-	</Suspense>
+	const fallback = useCallback<(error: Error, info: React.ErrorInfo, retry: () => void) => React.ReactNode>((_, __, retry) => {
+		return <button onClick={retry}>Retry</button>
+	}, []);
+
+	return <ErrorBoundary fallback={fallback}>
+		<Suspense fallback="loading...">
+			<Delayed />
+		</Suspense>
+	</ErrorBoundary>
 }

packages/react-tools-lib/README.md

@@ -852,9 +852,9 @@ usePopover({ mode, onBeforeToggle, onToggle }: UsePopoverProps): UsePopoverResul
 
 ### usePromiseSuspensible
 
-Hook to resolve promise with Suspense support. The component that uses it, it need to be wrapped with Suspense component. [See demo](https://ndriadev.github.io/react-tools/#/hooks/api-dom/usePromiseSuspensible)
+Hook to resolve promise with Suspense support. The component that uses it, it need to be wrapped with Suspense component. This hook can be used in conditional blocks. [See demo](https://ndriadev.github.io/react-tools/#/hooks/api-dom/usePromiseSuspensible)
 ```tsx
-usePromiseSuspensible<T extends (...args: unknown[]) => Promise<unknown>>(promise: T, deps: DependencyList, options: { clearCacheOnUnmount?: boolean } = {clearCacheOnUnmount: false}): Awaited<ReturnType<T>>
+usePromiseSuspensible<T>(promise: ()=>Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean } = {}): Awaited<ReturnType<typeof promise>>
 ```
 
 ### usePublishSubscribe
@@ -1281,10 +1281,17 @@ To validate dependencies of custom hooks like `useMemoCompare`, configure `exhau
   	"rules": {
     	// ...
     	"react-hooks/exhaustive-deps": [
-			"warn", {
+			"warn",
+            {
 				"additionalHooks": "(useMemoCompare|useMemoDeepCompare|useCallbackCompare|useCallbackDeepCompare|useLayoutEffectCompare|useLayoutEffectDeepCompare|useInsertionEffectCompare|useInsertionEffectDeepCompare|useEffectCompare|useEffectDeepCompare|usePromiseSuspensible)"
   		  	}
 		]
+    	"react-hooks/rules-of-hooks": [
+			"of",
+            {
+				"additionalHooks": "(usePromiseSuspensible)"
+  		  	}
+		]
 	}
 }
 ```

packages/react-tools-lib/scripts/generateREADME.js

@@ -604,10 +604,17 @@ async function generateReadme() {
 			'  	"rules": {',
 			'    	// ...',
 			'    	"react-hooks/exhaustive-deps": [',
-			'			"warn", {',
+			'			"warn",',
+			'            {',
 			'				"additionalHooks": "(useMemoCompare|useMemoDeepCompare|useCallbackCompare|useCallbackDeepCompare|useLayoutEffectCompare|useLayoutEffectDeepCompare|useInsertionEffectCompare|useInsertionEffectDeepCompare|useEffectCompare|useEffectDeepCompare|usePromiseSuspensible)"',
 			'  		  	}',
 			'		]',
+			'    	"react-hooks/rules-of-hooks": [',
+			'			"of",',
+			'            {',
+			'				"additionalHooks": "(usePromiseSuspensible)"',
+			'  		  	}',
+			'		]',
 			'	}',
 			'}',
 			"```",

packages/react-tools-lib/src/hooks/api-dom/usePromiseSuspensible.ts

@@ -1,23 +1,24 @@
-import { DependencyList, useRef } from "react";
+import { DependencyList } from "react";
 import { useEffectOnce } from "../lifecycle";
 import { isDeepEqual } from "../../utils";
 
-const promiseCache: { deps: DependencyList, promise: Promise<void>, error?: unknown, response?: unknown, cache: "unmount" | number | null }[] = [];
+const promiseCache: { deps: DependencyList, promise: Promise<void>, error?: unknown, response?: unknown, cache: "unmount" | number | null, errorTimeout?: number }[] = [];
 
 /**
- * **`usePromiseSuspensible`**: Hook to resolve promise with Suspense support. The component that uses it, it need to be wrapped with Suspense component. [See demo](https://ndriadev.github.io/react-tools/#/hooks/api-dom/usePromiseSuspensible)
- * @param {T} promise - Function that returns a promise to suspense.
+ * **`usePromiseSuspensible`**: Hook to resolve promise with Suspense support. The component that uses it, it need to be wrapped with Suspense component. This hook can be used in conditional blocks. [See demo](https://ndriadev.github.io/react-tools/#/hooks/api-dom/usePromiseSuspensible)
+ * @param {()=>Promise<T>} promise - Function that returns a promise to suspense.
  * @param {DependencyList} deps - DependencyList for promise to suspense.
- * @param {{ clearCacheOnUnmount?: boolean }} [options] - optional options.
- * @param {"unmount"|number} [options.cache=undefined] - value can be "unmount", to clean promise cached at component unmounting, or it can be the duration in millisecond of cached promise.
+ * @param {{ clearCacheOnUnmount?: "unmount"|number, cleanOnError?: boolean }} [options] - optional options.
+ * @param {"unmount"|number} [options.cache=undefined] - value can be "unmount", to clean promise cached at component unmounting, or it can be the duration in __seconds__ of cached promise.
+ * @param {boolean} [options.cleanOnError=undefined] - if true, when there is an error, remove promise from cache with a delay of 20 millisecond (due to multiple renders of react strict mode).
  * @returns {Awaited<ReturnType<T>>} result - resolve promise value.
  */
-export const usePromiseSuspensible = <T extends (...args: unknown[]) => Promise<unknown>>(promise: T, deps: DependencyList, options: { cache?: "unmount" | number } = {}): Awaited<ReturnType<T>> => {
-	const index = useRef(-1);
+export const usePromiseSuspensible = <T>(promise: ()=>Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean } = {}): Awaited<ReturnType<typeof promise>> => {
+	let index = -1;
 	useEffectOnce(() => () => {
 		if (options.cache === "unmount") {
-			index.current !== -1 && promiseCache.splice(index.current, 1);
-			index.current = -1;
+			index !== -1 && promiseCache.splice(index, 1);
+			index = -1;
 		}
 	})
 	for (const ind in promiseCache) {
@@ -26,29 +27,35 @@ export const usePromiseSuspensible = <T extends (...args: unknown[]) => Promise<
 				promiseCache.splice(Number(ind), 1);
 				break;
 			} else {
-				index.current = Number(ind);
+				index = Number(ind);
 				if ("error" in promiseCache[ind]) {
+					if (options.cleanOnError) {
+						promiseCache[ind].errorTimeout !== -1 && clearTimeout(promiseCache[ind].errorTimeout);
+						promiseCache[ind].errorTimeout = setTimeout(() => {
+							promiseCache.splice(Number(ind), 1);
+						}, 20) as unknown as number;
+					}
 					throw promiseCache[ind].error;
 				}
 				if ("response" in promiseCache[ind]) {
-					return promiseCache[ind].response as Awaited<ReturnType<T>>;
+					return promiseCache[ind].response as Awaited<ReturnType<typeof promise>>;
 				}
 				throw promiseCache[ind].promise;
 			}
 		}
 	}
-	const cached: { deps: DependencyList, promise: Promise<void>, error?: unknown, response?: Awaited<ReturnType<T>>, cache: "unmount" | number | null } = {
+	const cached: { deps: DependencyList, promise: Promise<void>, error?: unknown, response?: Awaited<ReturnType<typeof promise>>, cache: "unmount" | number | null } = {
 		deps: [...deps, String.raw`${promise.toString()}`],
-		cache: options.cache ? options.cache === "unmount" ? "unmount" : Date.now() + options.cache : null,
+		cache: options.cache ? options.cache === "unmount" ? "unmount" : Date.now() + (options.cache*1000) : null,
 		promise: promise()
 			.then(response => {
-				cached.response = response as Awaited<ReturnType<T>>;
+				cached.response = response as Awaited<ReturnType<typeof promise>>;
 			})
 			.catch(err => {
 				cached.error = err;
 			})
 	};
 
-	index.current = promiseCache.push(cached) - 1;
+	index = promiseCache.push(cached) - 1;
 	throw cached.promise;
 }