@kirill.konshin/react 0.0.2 → 0.0.3

package/.turbo/turbo-build.log

@@ -12,14 +12,14 @@ transforming...
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
-dist/useFetch.js     0.57 kB │ map: 1.69 kB
 dist/index.js        0.67 kB │ map: 0.10 kB
 dist/apiCall.js      0.69 kB │ map: 1.45 kB
 dist/useFetcher.js   1.18 kB │ map: 2.62 kB
 dist/keyboard.js     1.27 kB │ map: 2.81 kB
 dist/form/client.js  1.58 kB │ map: 3.88 kB
+dist/useFetch.js     2.04 kB │ map: 5.62 kB
 dist/form/form.js    2.89 kB │ map: 7.94 kB
-[vite:dts] Declaration files built in 1853ms.
+[vite:dts] Declaration files built in 2092ms.
 
-✓ built in 5.02s
+✓ built in 6.76s
 Updated package.json with exports

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @kirill.konshin/react
 
+## 0.0.3
+
+### Patch Changes
+
+- Minor fixes
+
 ## 0.0.2
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,56 @@
+# `useFetch`
+
+```tsx
+import { useEffect } from 'react';
+import { useFetch } from '@kirill.konshin/react';
+
+const [data, actionFn, isPending, error] = useFetch(async (args) => {
+    return callToBackend(args);
+}, defaultValue);
+
+useEffect(() => {
+    actionFn({ id: 1 });
+}, []);
+```
+
+```tsx
+import { useEffect } from 'react';
+import { useFetch } from '@kirill.konshin/react';
+
+const dataRef = useRef(data);
+
+const [data, actionFn, isPending, error] = useFetch(async (args) => {
+    const data = await callToBackend(args);
+    return [...dataRef.current, data];
+}, defaultValue);
+
+useEffect(() => {
+    dataRef.current = value;
+}, [data]);
+
+useEffect(async () => {
+    await actionFn({ id: 1 });
+    await actionFn({ id: 2 });
+    await actionFn({ id: 3 });
+}, []);
+```
+
+```tsx
+import { useEffect } from 'react';
+import { useFetch } from '@kirill.konshin/react';
+
+const [data, actionFn, isPending, error] = useFetch(
+    // first function has to be synchronous, second can be async
+    (args) => async (oldData) => {
+        const data = await callToBackend(args);
+        return [...oldData, data];
+    },
+    defaultValue,
+);
+
+useEffect(async () => {
+    await actionFn({ id: 1 });
+    await actionFn({ id: 2 });
+    await actionFn({ id: 3 });
+}, []);
+```

package/dist/useFetch.d.ts

@@ -1,2 +1,29 @@
-export declare function useFetch<R>(fn: (...args: any[]) => Promise<R>, defaultValue?: R | null): [R | null, typeof fn, boolean, Error | undefined];
+/**
+ * TODO useFetch https://use-http.com
+ * TODO SWR?
+ * TODO Tanstack Query?
+ *
+ * Uses same return array patterns as useActionState https://react.dev/reference/react/useActionState + error,
+ * reason: simple var rename
+ *
+ * Function can be async, then it will be awaited and result set to state.
+ *
+ * Function can be sync, then it will be called args, and it should return another function,which will be called with
+ * old data and result set to state. This is useful for pagination and merging data.
+ *
+ * @param {(...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R))} fn
+ * @param {any} defaultValue
+ * @param fetchOnMount
+ * @param throwAfterUnmount - throw if component is unmounted after fetch completed
+ * @returns {[R, (...args: any[]) => Promise<R>, boolean, Error | undefined]} //, ReturnType<typeof useState>, ReturnType<typeof useState>
+ */
+export declare function useFetch<R>(fn: (...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R), defaultValue: R, { fetchOnMount, throwAfterUnmount, }?: {
+    fetchOnMount?: boolean;
+    throwAfterUnmount?: boolean;
+}): [
+    R,
+    (...args: Parameters<typeof fn>) => Promise<R>,
+    boolean,
+    Error | undefined
+];
 //# sourceMappingURL=useFetch.d.ts.map

package/dist/useFetch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFetch.d.ts","sourceRoot":"","sources":["../src/useFetch.ts"],"names":[],"mappings":"AAOA,wBAAgB,QAAQ,CAAC,CAAC,EACtB,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EAClC,YAAY,GAAE,CAAC,GAAG,IAAW,GAC9B,CAAC,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,GAAG,SAAS,CAAC,CAkBnD"}
+{"version":3,"file":"useFetch.d.ts","sourceRoot":"","sources":["../src/useFetch.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACtB,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EACzE,YAAY,EAAE,CAAC,EACf,EACI,YAAoB,EACpB,iBAAyB,GAC5B,GAAE;IACC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC1B,GACP;IACC,CAAC;IACD,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC;IAC9C,OAAO;IACP,KAAK,GAAG,SAAS;CAGpB,CAkEA"}

package/dist/useFetch.js

@@ -1,18 +1,64 @@
 "use client";
-import { useTransition, useState, useCallback } from "react";
-function useFetch(fn, defaultValue = null) {
+import { useTransition, useState, useRef, useCallback, useEffect } from "react";
+const unmountError = "Component is unmounted after fetch completed";
+function useFetch(fn, defaultValue, {
+  fetchOnMount = false,
+  throwAfterUnmount = false
+} = {}) {
   const [isPending, startTransition] = useTransition();
   const [data, setData] = useState(defaultValue);
   const [error, setError] = useState();
+  const [loading, setLoading] = useState(fetchOnMount);
+  const isMounted = useRef(false);
+  const oldData = useRef(data);
+  const throwAfterUnmountRef = useRef(throwAfterUnmount);
   const actionFn = useCallback(
     (...args) => {
-      const promise = fn(...args);
-      startTransition(() => promise.then(setData).catch(setError));
+      const res = fn(...args);
+      const promise = typeof res === "function" ? res(oldData.current) : res;
+      startTransition(async () => {
+        try {
+          const newData = await promise;
+          if (!isMounted.current) {
+            if (throwAfterUnmountRef.current) throw new Error(unmountError);
+            return;
+          }
+          oldData.current = newData;
+          setData(newData);
+          setError(void 0);
+        } catch (e) {
+          if (!isMounted.current) {
+            if (throwAfterUnmountRef.current) {
+              if (e.message !== unmountError) throw new Error("Component is unmounted", { cause: e });
+              else throw e;
+            }
+            return;
+          }
+          setError(e);
+        } finally {
+          if (isMounted.current) {
+            setLoading(false);
+          }
+        }
+      });
       return promise;
     },
     [fn]
   );
-  return [data, actionFn, isPending, error];
+  useEffect(() => {
+    if (!fetchOnMount) return;
+    actionFn().catch((e) => console.error("Fetch on mount failed", e));
+  }, [fetchOnMount, fn, actionFn]);
+  useEffect(() => {
+    throwAfterUnmountRef.current = throwAfterUnmount;
+  }, [throwAfterUnmount]);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  });
+  return [data, actionFn, isPending || loading, error];
 }
 export {
   useFetch

package/dist/useFetch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFetch.js","sources":["../src/useFetch.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useState, useTransition } from 'react';\n\n//TODO useFetch https://use-http.com\n//TODO SWR?\n//TODO Tanstack Query?\nexport function useFetch<R>(\n    fn: (...args: any[]) => Promise<R>,\n    defaultValue: R | null = null,\n): [R | null, typeof fn, boolean, Error | undefined] {\n    // An async function was passed to useActionState, but it was dispatched outside of an action context.\n    // This is likely not what you intended. Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`\n    const [isPending, startTransition] = useTransition();\n    const [data, setData] = useState<R | null>(defaultValue);\n    const [error, setError] = useState<Error>();\n\n    const actionFn = useCallback(\n        (...args: Parameters<typeof fn>) => {\n            const promise = fn(...args);\n            // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n            startTransition(() => promise.then(setData).catch(setError)); //FIXME sub-chain...\n            return promise;\n        },\n        [fn],\n    );\n\n    return [data, actionFn, isPending, error];\n}\n"],"names":[],"mappings":";;AAOO,SAAS,SACZ,IACA,eAAyB,MACwB;AAGjD,QAAM,CAAC,WAAW,eAAe,IAAI,cAAA;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,YAAY;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAA;AAE1B,QAAM,WAAW;AAAA,IACb,IAAI,SAAgC;AAChC,YAAM,UAAU,GAAG,GAAG,IAAI;AAE1B,sBAAgB,MAAM,QAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC3D,aAAO;AAAA,IACX;AAAA,IACA,CAAC,EAAE;AAAA,EAAA;AAGP,SAAO,CAAC,MAAM,UAAU,WAAW,KAAK;AAC5C;"}
+{"version":3,"file":"useFetch.js","sources":["../src/useFetch.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState, useTransition } from 'react';\n\nconst unmountError = 'Component is unmounted after fetch completed';\n\n/**\n * TODO useFetch https://use-http.com\n * TODO SWR?\n * TODO Tanstack Query?\n *\n * Uses same return array patterns as useActionState https://react.dev/reference/react/useActionState + error,\n * reason: simple var rename\n *\n * Function can be async, then it will be awaited and result set to state.\n *\n * Function can be sync, then it will be called args, and it should return another function,which will be called with\n * old data and result set to state. This is useful for pagination and merging data.\n *\n * @param {(...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R))} fn\n * @param {any} defaultValue\n * @param fetchOnMount\n * @param throwAfterUnmount - throw if component is unmounted after fetch completed\n * @returns {[R, (...args: any[]) => Promise<R>, boolean, Error | undefined]} //, ReturnType<typeof useState>, ReturnType<typeof useState>\n */\nexport function useFetch<R>(\n    fn: (...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R),\n    defaultValue: R,\n    {\n        fetchOnMount = false,\n        throwAfterUnmount = false,\n    }: {\n        fetchOnMount?: boolean;\n        throwAfterUnmount?: boolean;\n    } = {},\n): [\n    R,\n    (...args: Parameters<typeof fn>) => Promise<R>,\n    boolean,\n    Error | undefined,\n    // ReturnType<typeof useState<R>>[1],\n    // ReturnType<typeof useState<Error>>[1],\n] {\n    // An async function was passed to useActionState, but it was dispatched outside of an action context.\n    // This is likely not what you intended. Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`\n    const [isPending, startTransition] = useTransition();\n    const [data, setData] = useState<R>(defaultValue);\n    const [error, setError] = useState<Error>();\n    const [loading, setLoading] = useState(fetchOnMount);\n    const isMounted = useRef(false);\n    const oldData = useRef(data);\n    const throwAfterUnmountRef = useRef(throwAfterUnmount);\n\n    const actionFn = useCallback(\n        (...args: Parameters<typeof fn>) => {\n            const res = fn(...args);\n\n            const promise: Promise<R> = typeof res === 'function' ? (res as any)(oldData.current) : (res as Promise<R>);\n\n            // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n            startTransition(async () => {\n                try {\n                    const newData = await promise;\n                    if (!isMounted.current) {\n                        if (throwAfterUnmountRef.current) throw new Error(unmountError);\n                        return;\n                    }\n                    oldData.current = newData;\n                    setData(newData);\n                    setError(undefined);\n                } catch (e) {\n                    if (!isMounted.current) {\n                        if (throwAfterUnmountRef.current) {\n                            if (e.message !== unmountError) throw new Error('Component is unmounted', { cause: e });\n                            else throw e;\n                        }\n                        return;\n                    }\n                    setError(e);\n                } finally {\n                    if (isMounted.current) {\n                        setLoading(false);\n                    }\n                }\n            });\n\n            return promise;\n        },\n        [fn],\n    );\n\n    useEffect(() => {\n        if (!fetchOnMount) return;\n        actionFn().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen\n    }, [fetchOnMount, fn, actionFn]);\n\n    useEffect(() => {\n        throwAfterUnmountRef.current = throwAfterUnmount;\n    }, [throwAfterUnmount]);\n\n    useEffect(() => {\n        isMounted.current = true;\n        return () => {\n            isMounted.current = false;\n        };\n    });\n\n    return [data, actionFn, isPending || loading, error]; // , setData, setError\n}\n"],"names":[],"mappings":";;AAIA,MAAM,eAAe;AAqBd,SAAS,SACZ,IACA,cACA;AAAA,EACI,eAAe;AAAA,EACf,oBAAoB;AACxB,IAGI,IAQN;AAGE,QAAM,CAAC,WAAW,eAAe,IAAI,cAAA;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAY,YAAY;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAA;AAC1B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AACnD,QAAM,YAAY,OAAO,KAAK;AAC9B,QAAM,UAAU,OAAO,IAAI;AAC3B,QAAM,uBAAuB,OAAO,iBAAiB;AAErD,QAAM,WAAW;AAAA,IACb,IAAI,SAAgC;AAChC,YAAM,MAAM,GAAG,GAAG,IAAI;AAEtB,YAAM,UAAsB,OAAO,QAAQ,aAAc,IAAY,QAAQ,OAAO,IAAK;AAGzF,sBAAgB,YAAY;AACxB,YAAI;AACA,gBAAM,UAAU,MAAM;AACtB,cAAI,CAAC,UAAU,SAAS;AACpB,gBAAI,qBAAqB,QAAS,OAAM,IAAI,MAAM,YAAY;AAC9D;AAAA,UACJ;AACA,kBAAQ,UAAU;AAClB,kBAAQ,OAAO;AACf,mBAAS,MAAS;AAAA,QACtB,SAAS,GAAG;AACR,cAAI,CAAC,UAAU,SAAS;AACpB,gBAAI,qBAAqB,SAAS;AAC9B,kBAAI,EAAE,YAAY,aAAc,OAAM,IAAI,MAAM,0BAA0B,EAAE,OAAO,GAAG;AAAA,kBACjF,OAAM;AAAA,YACf;AACA;AAAA,UACJ;AACA,mBAAS,CAAC;AAAA,QACd,UAAA;AACI,cAAI,UAAU,SAAS;AACnB,uBAAW,KAAK;AAAA,UACpB;AAAA,QACJ;AAAA,MACJ,CAAC;AAED,aAAO;AAAA,IACX;AAAA,IACA,CAAC,EAAE;AAAA,EAAA;AAGP,YAAU,MAAM;AACZ,QAAI,CAAC,aAAc;AACnB,aAAA,EAAW,MAAM,CAAC,MAAM,QAAQ,MAAM,yBAAyB,CAAC,CAAC;AAAA,EACrE,GAAG,CAAC,cAAc,IAAI,QAAQ,CAAC;AAE/B,YAAU,MAAM;AACZ,yBAAqB,UAAU;AAAA,EACnC,GAAG,CAAC,iBAAiB,CAAC;AAEtB,YAAU,MAAM;AACZ,cAAU,UAAU;AACpB,WAAO,MAAM;AACT,gBAAU,UAAU;AAAA,IACxB;AAAA,EACJ,CAAC;AAED,SAAO,CAAC,MAAM,UAAU,aAAa,SAAS,KAAK;AACvD;"}

package/dist/useFetch.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useFetch.test.d.ts.map

package/dist/useFetch.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetch.test.d.ts","sourceRoot":"","sources":["../src/useFetch.test.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kirill.konshin/react",
   "description": "Utilities",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "----- BUILD -----": "",
@@ -24,7 +24,13 @@
   },
   "devDependencies": {
     "@kirill.konshin/utils-private": "*",
-    "react": "^19.1.1"
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react-dom": "^19",
+    "jsdom": "^29.0.1",
+    "react": "^19.1.1",
+    "react-dom": "19.1.1"
   },
   "peerDependencies": {
     "react": "^19"
@@ -35,7 +41,8 @@
     }
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "author": "Kirill Konshin <kirill@konshin.org> (https://konshin.org)",
   "license": "MIT",
@@ -55,5 +62,10 @@
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kirill-konshin/utils.git",
+    "directory": "packages/react"
+  }
 }

package/src/useFetch.test.tsx

@@ -0,0 +1,424 @@
+import { expect, describe, test, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useFetch } from './useFetch';
+import { act } from 'react';
+
+describe('useFetch', () => {
+    test('initializes with default value', () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        const [data, actionFn, isPending, error] = result.current;
+
+        expect(data).toBe('default');
+        expect(typeof actionFn).toBe('function');
+        expect(isPending).toBe(false);
+        expect(error).toBeUndefined();
+    });
+
+    test('executes function and updates data on success', async () => {
+        const mockFn = vi.fn(async () => 'success');
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[2]).toBe(false); // isPending becomes false
+        });
+
+        expect(result.current[0]).toBe('success');
+        expect(result.current[3]).toBeUndefined();
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    test('handles function arguments', async () => {
+        const mockFn = vi.fn(async (a: number, b: string) => `${a}-${b}`);
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1](42, 'test');
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('42-test');
+        });
+
+        expect(mockFn).toHaveBeenCalledWith(42, 'test');
+    });
+
+    test('sets isPending to true during execution', async () => {
+        let resolvePromise: (value: string) => void;
+        const promise = new Promise<string>((resolve) => {
+            resolvePromise = resolve;
+        });
+        const mockFn = vi.fn(async () => promise);
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        act(() => {
+            result.current[1]();
+        });
+
+        // Should be pending immediately
+        expect(result.current[2]).toBe(true);
+
+        await act(async () => {
+            resolvePromise!('resolved');
+            await promise;
+        });
+
+        await waitFor(() => {
+            expect(result.current[2]).toBe(false);
+        });
+
+        expect(result.current[0]).toBe('resolved');
+    });
+
+    test('captures and stores errors', async () => {
+        const error = new Error('Test error');
+        const mockFn = vi.fn(async () => {
+            throw error;
+        });
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[3]).toBe(error);
+        });
+
+        expect(result.current[0]).toBe('default'); // data remains unchanged
+        expect(result.current[2]).toBe(false); // isPending becomes false
+    });
+
+    test('does not update data if component unmounts before resolution', async () => {
+        let resolvePromise: (value: string) => void;
+        const promise = new Promise<string>((resolve) => {
+            resolvePromise = resolve;
+        });
+        const mockFn = vi.fn(async () => promise);
+        const { result, unmount } = renderHook(() => useFetch(mockFn, 'default'));
+
+        act(() => {
+            result.current[1]();
+        });
+
+        unmount();
+
+        await act(async () => {
+            resolvePromise!('resolved');
+            await promise;
+        });
+
+        // No assertions needed - just verifying no errors on unmount
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    test('returns the promise from actionFn', async () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        let returnedPromise: Promise<string>;
+        await act(async () => {
+            returnedPromise = result.current[1]();
+        });
+
+        await expect(returnedPromise!).resolves.toBe('result');
+    });
+
+    test('handles multiple sequential calls', async () => {
+        const mockFn = vi.fn(async (n: number) => `result-${n}`);
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1](1);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result-1');
+        });
+
+        await act(async () => {
+            result.current[1](2);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result-2');
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    test('preserves actionFn reference when fn dependency does not change', () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { result, rerender } = renderHook(() => useFetch(mockFn, 'default'));
+
+        const firstActionFn = result.current[1];
+
+        rerender();
+
+        const secondActionFn = result.current[1];
+
+        expect(firstActionFn).toBe(secondActionFn);
+    });
+
+    test('updates actionFn when fn dependency changes', async () => {
+        const mockFn1 = vi.fn(async () => 'result1');
+        const mockFn2 = vi.fn(async () => 'result2');
+
+        const { result, rerender } = renderHook(({ fn }) => useFetch(fn, 'default'), {
+            initialProps: { fn: mockFn1 },
+        });
+
+        const firstActionFn = result.current[1];
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result1');
+        });
+
+        // Change the function
+        rerender({ fn: mockFn2 });
+
+        const secondActionFn = result.current[1];
+
+        expect(firstActionFn).not.toBe(secondActionFn);
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result2');
+        });
+
+        expect(mockFn1).toHaveBeenCalledTimes(1);
+        expect(mockFn2).toHaveBeenCalledTimes(1);
+    });
+
+    test('does not trigger execution on rerender', () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { rerender } = renderHook(() => useFetch(mockFn, 'default'));
+
+        rerender();
+        rerender();
+        rerender();
+
+        expect(mockFn).not.toHaveBeenCalled();
+    });
+
+    test('handles concurrent calls correctly', async () => {
+        let callCount = 0;
+        const mockFn = vi.fn(async () => {
+            callCount++;
+            const currentCall = callCount;
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            return `result-${currentCall}`;
+        });
+
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        // Fire multiple calls at once
+        await act(async () => {
+            result.current[1]();
+            result.current[1]();
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[2]).toBe(false);
+        });
+
+        // Last call should win
+        expect(mockFn).toHaveBeenCalledTimes(3);
+        expect(['result-1', 'result-2', 'result-3']).toContain(result.current[0]);
+    });
+
+    test('maintains separate state for different hook instances', async () => {
+        const mockFn1 = vi.fn(async () => 'result1');
+        const mockFn2 = vi.fn(async () => 'result2');
+
+        const { result: result1 } = renderHook(() => useFetch(mockFn1, 'default1'));
+        const { result: result2 } = renderHook(() => useFetch(mockFn2, 'default2'));
+
+        expect(result1.current[0]).toBe('default1');
+        expect(result2.current[0]).toBe('default2');
+
+        await act(async () => {
+            result1.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result1.current[0]).toBe('result1');
+        });
+
+        expect(result2.current[0]).toBe('default2'); // unchanged
+
+        await act(async () => {
+            result2.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result2.current[0]).toBe('result2');
+        });
+
+        expect(result1.current[0]).toBe('result1'); // still unchanged
+    });
+
+    test('handles closure over external state', async () => {
+        let externalValue = 10;
+
+        const { result, rerender } = renderHook(() => {
+            const mockFn = async () => `value-${externalValue}`;
+            return useFetch(mockFn, 'default');
+        });
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('value-10');
+        });
+
+        // Change external value and rerender
+        externalValue = 20;
+        rerender();
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('value-20');
+        });
+    });
+
+    test('clears error on successful subsequent call', async () => {
+        const error = new Error('Test error');
+        let shouldError = true;
+
+        const mockFn = vi.fn(async () => {
+            if (shouldError) {
+                throw error;
+            }
+            return 'success';
+        });
+
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        // First call errors
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[3]).toBe(error);
+        });
+
+        // Second call succeeds
+        shouldError = false;
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('success');
+        });
+
+        // Error is cleared automatically
+        expect(result.current[3]).toBe(undefined);
+    });
+
+    test('handles callback that returns a function with old value', async () => {
+        const mockFn = vi.fn((increment: number) => (oldValue: number) => oldValue + increment);
+        const { result } = renderHook(() => useFetch(mockFn, 0));
+
+        // First call - should call the function with oldValue (0) and get 0 + 5 = 5
+        await act(async () => {
+            result.current[1](5);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(5);
+        });
+
+        // Second call - should call the function with oldValue (5) and get 5 + 10 = 15
+        await act(async () => {
+            result.current[1](10);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(15);
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    test('handles multiple calls with old value pattern', async () => {
+        const mockFn = vi.fn(
+            (operation: string, value: number) => (oldValue: string) => `${oldValue}-${operation}${value}`,
+        );
+        const { result } = renderHook(() => useFetch(mockFn, 'initial'));
+
+        // First call
+        await act(async () => {
+            result.current[1]('add', 1);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('initial-add1');
+        });
+
+        // Second call - should use the updated value
+        await act(async () => {
+            result.current[1]('multiply', 2);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('initial-add1-multiply2');
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    test('handles counter pattern with old value', async () => {
+        const increment = vi.fn(() => (prev: number) => prev + 1);
+        const { result } = renderHook(() => useFetch(increment, 0));
+
+        // First increment: 0 + 1 = 1
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(1);
+        });
+
+        // Second increment: 1 + 1 = 2
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(2);
+        });
+
+        // Third increment: 2 + 1 = 3
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(3);
+        });
+
+        expect(increment).toHaveBeenCalledTimes(3);
+    });
+});

package/src/useFetch.ts

@@ -1,29 +1,109 @@
 'use client';
 
-import { useCallback, useState, useTransition } from 'react';
+import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
 
-//TODO useFetch https://use-http.com
-//TODO SWR?
-//TODO Tanstack Query?
+const unmountError = 'Component is unmounted after fetch completed';
+
+/**
+ * TODO useFetch https://use-http.com
+ * TODO SWR?
+ * TODO Tanstack Query?
+ *
+ * Uses same return array patterns as useActionState https://react.dev/reference/react/useActionState + error,
+ * reason: simple var rename
+ *
+ * Function can be async, then it will be awaited and result set to state.
+ *
+ * Function can be sync, then it will be called args, and it should return another function,which will be called with
+ * old data and result set to state. This is useful for pagination and merging data.
+ *
+ * @param {(...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R))} fn
+ * @param {any} defaultValue
+ * @param fetchOnMount
+ * @param throwAfterUnmount - throw if component is unmounted after fetch completed
+ * @returns {[R, (...args: any[]) => Promise<R>, boolean, Error | undefined]} //, ReturnType<typeof useState>, ReturnType<typeof useState>
+ */
 export function useFetch<R>(
-    fn: (...args: any[]) => Promise<R>,
-    defaultValue: R | null = null,
-): [R | null, typeof fn, boolean, Error | undefined] {
+    fn: (...args: any[]) => Promise<R> | R | ((oldData: R) => Promise<R> | R),
+    defaultValue: R,
+    {
+        fetchOnMount = false,
+        throwAfterUnmount = false,
+    }: {
+        fetchOnMount?: boolean;
+        throwAfterUnmount?: boolean;
+    } = {},
+): [
+    R,
+    (...args: Parameters<typeof fn>) => Promise<R>,
+    boolean,
+    Error | undefined,
+    // ReturnType<typeof useState<R>>[1],
+    // ReturnType<typeof useState<Error>>[1],
+] {
     // An async function was passed to useActionState, but it was dispatched outside of an action context.
     // This is likely not what you intended. Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`
     const [isPending, startTransition] = useTransition();
-    const [data, setData] = useState<R | null>(defaultValue);
+    const [data, setData] = useState<R>(defaultValue);
     const [error, setError] = useState<Error>();
+    const [loading, setLoading] = useState(fetchOnMount);
+    const isMounted = useRef(false);
+    const oldData = useRef(data);
+    const throwAfterUnmountRef = useRef(throwAfterUnmount);
 
     const actionFn = useCallback(
         (...args: Parameters<typeof fn>) => {
-            const promise = fn(...args);
+            const res = fn(...args);
+
+            const promise: Promise<R> = typeof res === 'function' ? (res as any)(oldData.current) : (res as Promise<R>);
+
             // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition
-            startTransition(() => promise.then(setData).catch(setError)); //FIXME sub-chain...
+            startTransition(async () => {
+                try {
+                    const newData = await promise;
+                    if (!isMounted.current) {
+                        if (throwAfterUnmountRef.current) throw new Error(unmountError);
+                        return;
+                    }
+                    oldData.current = newData;
+                    setData(newData);
+                    setError(undefined);
+                } catch (e) {
+                    if (!isMounted.current) {
+                        if (throwAfterUnmountRef.current) {
+                            if (e.message !== unmountError) throw new Error('Component is unmounted', { cause: e });
+                            else throw e;
+                        }
+                        return;
+                    }
+                    setError(e);
+                } finally {
+                    if (isMounted.current) {
+                        setLoading(false);
+                    }
+                }
+            });
+
             return promise;
         },
         [fn],
     );
 
-    return [data, actionFn, isPending, error];
+    useEffect(() => {
+        if (!fetchOnMount) return;
+        actionFn().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen
+    }, [fetchOnMount, fn, actionFn]);
+
+    useEffect(() => {
+        throwAfterUnmountRef.current = throwAfterUnmount;
+    }, [throwAfterUnmount]);
+
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    });
+
+    return [data, actionFn, isPending || loading, error]; // , setData, setError
 }