feat: add useAsync hook #17

novajslabs · Dec 2, 2024 · 82646a4 · 82646a4
1 parent 8c45bc3
commit 82646a4
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 0 deletions.
diff --git a/snippets/js.code-snippets b/snippets/js.code-snippets
@@ -1659,5 +1659,46 @@
       "};"
     ],
     "description": "React hook to track the dimensions of the browser window"
+  },
+  "useAsync": {
+    "prefix": "useAsync",
+    "body": [
+      "import { useState, useCallback } from 'react';",
+      "",
+      "export const useAsync = () => {",
+      "  const [state, setState] = useState({",
+      "    data: null,",
+      "    isLoading: false,",
+      "    error: null,",
+      "    isSuccess: false",
+      "  });",
+      "",
+      "  const execute = useCallback(async (asyncFunction) => {",
+      "    setState((prev) => ({ ...prev, isLoading: true, error: null }));",
+      "",
+      "    try {",
+      "      const result = await asyncFunction();",
+      "      setState({",
+      "        data: result,",
+      "        isLoading: false,",
+      "        error: null,",
+      "        isSuccess: true",
+      "      });",
+      "      return result;",
+      "    } catch (error) {",
+      "      setState({",
+      "        data: null,",
+      "        isLoading: false,",
+      "        error: error,",
+      "        isSuccess: false",
+      "      });",
+      "      throw error;",
+      "    }",
+      "  }, []);",
+      "",
+      "  return { execute, ...state };",
+      "};"
+    ],
+    "description": "React hook to handle async operations"
   }
 }
diff --git a/snippets/ts.code-snippets b/snippets/ts.code-snippets
@@ -1790,5 +1790,53 @@
       "};"
     ],
     "description": "React hook to track the dimensions of the browser window"
+  },
+  "useAsync": {
+    "prefix": "useAsync",
+    "body": [
+      "import { useState, useCallback } from 'react';",
+      "",
+      "interface UseAsyncState<T> {",
+      "  data: T | null;",
+      "  isLoading: boolean;",
+      "  error: Error | null;",
+      "  isSuccess: boolean;",
+      "}",
+      "",
+      "export const useAsync = <T>() => {",
+      "  const [state, setState] = useState<UseAsyncState<T>>({",
+      "    data: null,",
+      "    isLoading: false,",
+      "    error: null,",
+      "    isSuccess: false",
+      "  });",
+      "",
+      "  const execute = useCallback(async (asyncFunction: () => Promise<T>) => {",
+      "    setState((prev) => ({ ...prev, isLoading: true, error: null }));",
+      "",
+      "    try {",
+      "      const result = await asyncFunction();",
+      "      setState({",
+      "        data: result,",
+      "        isLoading: false,",
+      "        error: null,",
+      "        isSuccess: true",
+      "      });",
+      "      return result;",
+      "    } catch (error) {",
+      "      setState({",
+      "        data: null,",
+      "        isLoading: false,",
+      "        error: error as Error,",
+      "        isSuccess: false",
+      "      });",
+      "      throw error;",
+      "    }",
+      "  }, []);",
+      "",
+      "  return { execute, ...state };",
+      "};"
+    ],
+    "description": "React hook to handle async operations"
   }
 }