fix: ensure one reachability check in-flight at once / proper useEffect listener cleanup (#732)

OlimpiaZurek · web-flow · commit eaed080b5642 · 2024-09-20T11:13:34.000-05:00
* fix: track ongoing requests during refresh
* update example
* add a request queue
diff --git a/example/ConnectionInfoRefresh.tsx b/example/ConnectionInfoRefresh.tsx
@@ -34,12 +34,21 @@ export default class ConnectionInfoCurrent extends React.Component<
     });
   };
 
+  _triggerMultipleRefreshes = (): void => {
+    // Trigger multiple refreshes in quick succession
+    this._refreshState();
+    this._refreshState();
+    this._refreshState();
+    this._refreshState();
+  };
+
   render() {
     return (
       <View>
-        <TouchableOpacity onPress={this._refreshState}>
-          <Text style={{color: 'black'}}>{this.state.connectionInfo}</Text>
+        <TouchableOpacity onPress={this._triggerMultipleRefreshes}>
+          <Text>Tap to trigger multiple refreshes</Text>
         </TouchableOpacity>
+        <Text style={{color: 'black'}}>{this.state.connectionInfo}</Text>
       </View>
     );
   }
diff --git a/src/index.ts b/src/index.ts
@@ -23,6 +23,10 @@ const createState = (): State => {
   return new State(_configuration);
 };
 
+// Track ongoing requests
+let isRequestInProgress = false;
+let requestQueue: ((state: Types.NetInfoState) => void)[] = [];
+
 /**
  * Configures the library with the given configuration. Note that calling this will stop all
  * previously added listeners from being called again. It is best to call this right when your
@@ -74,7 +78,23 @@ export function refresh(): Promise<Types.NetInfoState> {
   if (!_state) {
     _state = createState();
   }
-  return _state._fetchCurrentState();
+
+ // If a request is already in progress, return a promise that will resolve when the current request finishes
+  if (isRequestInProgress) {
+    return new Promise((resolve) => {
+      requestQueue.push(resolve);
+    });
+  }
+
+  isRequestInProgress = true;
+
+  return _state._fetchCurrentState().then((result) => {
+    requestQueue.forEach((resolve) => resolve(result));
+    requestQueue = [];
+    return result;
+  }).finally(() => {
+    isRequestInProgress = false;
+  });
 }
 
 /**
@@ -123,7 +143,8 @@ export function useNetInfo(
   });
 
   useEffect((): (() => void) => {
-    return addEventListener(setNetInfo);
+    const unsubscribe = addEventListener(setNetInfo);
+    return () => unsubscribe();
   }, []);
 
   return netInfo;
@@ -165,7 +186,12 @@ export function useNetInfoInstance(
   }, [isPaused, configuration]);
 
   const refresh = useCallback(() => {
-    networkInfoManager && networkInfoManager._fetchCurrentState();
+    if (networkInfoManager && !isRequestInProgress) {
+      isRequestInProgress = true;
+      networkInfoManager._fetchCurrentState().finally(() => {
+        isRequestInProgress = false;
+      });
+    }
   }, [networkInfoManager]);
 
   return {
