Merge pull request #102 from MattCCC/timeout-abort

React Native Support & High-throughput Performance Improvements

Author: MattCCC

README.md

@@ -1149,6 +1149,8 @@ const api = createApiFetcher({
 4. **Consider user experience** - Network revalidation happens silently in the background, providing smooth UX without loading spinners.
 
 > ⚠️ **Browser Support**: These features work in all modern browsers that support the `focus` and `online` events. In server-side environments (Node.js), these options are safely ignored.
+>
+> **React Native**: Use `setEventProvider()` to enable these features. See the [React Native](#react-native) section for details.
 
 </details>
 
@@ -3798,6 +3800,38 @@ For environments that do not support modern JavaScript features or APIs, you mig
 - **Promise Polyfill**: For older browsers that do not support Promises. Libraries like [es6-promise](https://github.com/stefanpenner/es6-promise) can be used.
 - **AbortController Polyfill**: For environments that do not support the `AbortController` API used for aborting fetch requests. You can use the [abort-controller](https://github.com/mysticatea/abort-controller) polyfill.
 
+### React Native
+
+`fetchff` is fully compatible with React Native. Core features like caching, retries, deduplication, and the React hook work out of the box.
+
+To enable `refetchOnFocus` and `refetchOnReconnect`, register event providers at your app's entry point using `setEventProvider()`:
+
+```ts
+import { AppState } from 'react-native';
+import NetInfo from '@react-native-community/netinfo';
+import { setEventProvider } from 'fetchff';
+
+// Refetch when app comes to foreground
+setEventProvider('focus', (handler) => {
+  const sub = AppState.addEventListener('change', (state) => {
+    if (state === 'active') handler();
+  });
+  return () => sub.remove();
+});
+
+// Refetch when network reconnects
+setEventProvider('online', (handler) => {
+  let wasConnected = true;
+  const unsubscribe = NetInfo.addEventListener((state) => {
+    if (state.isConnected && !wasConnected) handler();
+    wasConnected = !!state.isConnected;
+  });
+  return unsubscribe;
+});
+```
+
+> **Note:** `@react-native-community/netinfo` is optional — only needed if you use `refetchOnReconnect`.
+
 ### Using `node-fetch` for Node.js < 18
 
 If you need to support Node.js versions below 18 (not officially supported), you can use the [`node-fetch`](https://www.npmjs.com/package/node-fetch) package to polyfill the `fetch` API. Install it with:

dist/browser/index.global.js

@@ -1,2 +1,2 @@
-import {useMemo,useRef,useCallback,useSyncExternalStore}from'react';import {generateCacheKey,buildConfig,getCache,getInFlightPromise,fetchf,getCachedResponse,subscribe,addTimeout,abortRequest,deleteCache}from'fetchff';var F=-1,D=2e3,m=new Map,q=e=>{e&&m.set(e,(m.get(e)||0)+1);},A=(e,t,s,o)=>{if(!e)return;let a=f(e);if(!a)return;let i=a-1;i<=0?(m.delete(e),t===F&&addTimeout("r:"+e,()=>{abortRequest(e,new DOMException("Request to "+o+" aborted","AbortError")),f(e)||deleteCache(e,true);},s!=null?s:D)):m.set(e,i);},f=e=>e&&m.get(e)||0;var Y=300,x=Object.freeze({data:null,error:null,isFetching:false,mutate:()=>Promise.resolve(null),config:{},headers:{}}),K=Object.freeze({...x,isFetching:true}),Z=[null,{},null],$=new Set(["GET","HEAD","get","head"]);function ae(e,t={}){var b,U,_;let s=useMemo(()=>e===null?null:generateCacheKey(buildConfig(e,t)),[t.cacheKey,e,t.url,t.method,t.headers,t.body,t.params,t.urlPathParams,t.apiUrl,t.baseURL,t.withCredentials,t.credentials]),o=(b=t.dedupeTime)!=null?b:D,a=t.cacheTime||F,i=(U=t.staleTime)!=null?U:Y,R=(_=t.immediate)!=null?_:$.has(t.method||"GET"),P=useRef(Z);P.current=[e,t,s];let g=useCallback(()=>{let r=getCache(s);if(t.strategy==="reject"&&s&&(!r||!r.data.data&&!r.data.error)){let h=getInFlightPromise(s,o);if(h)throw h;if(!r){let[u,c,l]=P.current;if(u)throw fetchf(u,{...c,cacheKey:l,dedupeTime:o,cacheTime:a,staleTime:i,strategy:"softFail",cacheErrors:true,_isAutoKey:!c.cacheKey})}}return r?r.data.isFetching&&!t.keepPreviousData?K:r.data:R?K:x},[s]),B=useCallback(r=>{q(s),R&&e&&s&&f(s)===1&&(getCachedResponse(s,a,t)||C(false));let u=subscribe(s,r);return ()=>{A(s,a,o,e),u();}},[s,R,e,o,a]),n=useSyncExternalStore(B,g,g),C=useCallback(async(r=true,h={})=>{let[u,c,l]=P.current;if(!u)return Promise.resolve(null);let E=!!r;if(!E&&l){let S=getCachedResponse(l,a,c);if(S)return Promise.resolve(S)}let Q=E?()=>true:c.cacheBuster;return fetchf(u,{...c,cacheKey:l,...h,dedupeTime:o,cacheTime:a,staleTime:i,cacheBuster:Q,strategy:"softFail",cacheErrors:true,_isAutoKey:!c.cacheKey})},[a,o]),T=n.data,p=!T&&!n.error,d=!!e&&(n.isFetching||p&&R),L=d&&p,w=d&&!p;return {data:T,error:n.error,config:n.config,headers:n.headers,isFirstFetch:L,isFetching:d,isLoading:d,isRefetching:w,isError:n.isError,isSuccess:n.isSuccess,mutate:n.mutate,refetch:C}}export{ae as useFetcher};//# sourceMappingURL=index.mjs.map
+import {useMemo,useRef,useCallback,useSyncExternalStore}from'react';import {generateCacheKey,buildConfig,getCache,getInFlightPromise,fetchf,getCachedResponse,subscribe,addTimeout,abortRequest,createAbortError,deleteCache}from'fetchff';var F=-1,y=2e3,m=new Map,S=e=>{e&&m.set(e,(m.get(e)||0)+1);},q=(e,t,r,o)=>{if(!e)return;let a=f(e);if(!a)return;let i=a-1;i<=0?(m.delete(e),t===F&&addTimeout("r:"+e,()=>{abortRequest(e,createAbortError("Request to "+o+" aborted","AbortError")),f(e)||deleteCache(e,true);},r!=null?r:y)):m.set(e,i);},f=e=>e&&m.get(e)||0;var Z=300,B=Object.freeze({data:null,error:null,isFetching:false,mutate:()=>Promise.resolve(null),config:{},headers:{}}),K=Object.freeze({...B,isFetching:true}),$=[null,{},null],k=new Set(["GET","HEAD","get","head"]);function ne(e,t={}){var b,U,_;let r=useMemo(()=>e===null?null:generateCacheKey(buildConfig(e,t)),[t.cacheKey,e,t.url,t.method,t.headers,t.body,t.params,t.urlPathParams,t.apiUrl,t.baseURL,t.withCredentials,t.credentials]),o=(b=t.dedupeTime)!=null?b:y,a=t.cacheTime||F,i=(U=t.staleTime)!=null?U:Z,R=(_=t.immediate)!=null?_:k.has(t.method||"GET"),P=useRef($);P.current=[e,t,r];let g=useCallback(()=>{let s=getCache(r);if(t.strategy==="reject"&&r&&(!s||!s.data.data&&!s.data.error)){let h=getInFlightPromise(r,o);if(h)throw h;if(!s){let[u,c,l]=P.current;if(u)throw fetchf(u,{...c,cacheKey:l,dedupeTime:o,cacheTime:a,staleTime:i,strategy:"softFail",cacheErrors:true,_isAutoKey:!c.cacheKey})}}return s?s.data.isFetching&&!t.keepPreviousData?K:s.data:R?K:B},[r]),L=useCallback(s=>{S(r),R&&e&&r&&f(r)===1&&(getCachedResponse(r,a,t)||C(false));let u=subscribe(r,s);return ()=>{q(r,a,o,e),u();}},[r,R,e,o,a]),n=useSyncExternalStore(L,g,g),C=useCallback(async(s=true,h={})=>{let[u,c,l]=P.current;if(!u)return Promise.resolve(null);let E=!!s;if(!E&&l){let A=getCachedResponse(l,a,c);if(A)return Promise.resolve(A)}let Q=E?()=>true:c.cacheBuster;return fetchf(u,{...c,cacheKey:l,...h,dedupeTime:o,cacheTime:a,staleTime:i,cacheBuster:Q,strategy:"softFail",cacheErrors:true,_isAutoKey:!c.cacheKey})},[a,o]),T=n.data,p=!T&&!n.error,d=!!e&&(n.isFetching||p&&R),x=d&&p,w=d&&!p;return {data:T,error:n.error,config:n.config,headers:n.headers,isFirstFetch:x,isFetching:d,isLoading:d,isRefetching:w,isError:n.isError,isSuccess:n.isSuccess,mutate:n.mutate,refetch:C}}export{ne as useFetcher};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map