(react-urql) - Fix React warning on cross-component updates

.changeset/rude-toes-chew.md

@@ -0,0 +1,5 @@
+---
+'urql': patch
+---
+
+Avoid React v16.13.0's "Warning: Cannot update a component" by preventing cross-hook updates during render or initial mount.

packages/react-urql/package.json

@@ -47,7 +47,6 @@
     "@testing-library/react-hooks": "^3.2.1",
     "@types/react": "^16.9.19",
     "@types/react-test-renderer": "^16.9.2",
-    "@types/use-subscription": "^1.0.0",
     "graphql": "^14.6.0",
     "graphql-tag": "^2.10.1",
     "react": "^16.13.0",
@@ -62,7 +61,6 @@
   },
   "dependencies": {
     "@urql/core": "^1.10.1",
-    "use-subscription": "^1.4.0",
     "wonka": "^4.0.7"
   }
 }

packages/react-urql/src/hooks/useSource.ts

@@ -1,8 +1,6 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import { useMemo, useEffect } from 'react';
-import { Subscription, Unsubscribe, useSubscription } from 'use-subscription';
+import { useMemo, useEffect, useState } from 'react';
 
 import {
   Source,
@@ -18,43 +16,38 @@ import {
 
 import { useClient } from '../context';
 
-export const useSource = <T>(source: Source<T>, init: T): T =>
-  useSubscription(
-    useMemo((): Subscription<T> => {
-      let hasUpdate = false;
-      let currentValue: T = init;
-
-      // Wrap the source and track its `currentValue`
-      const updateValue = pipe(
-        source,
-        onPush(value => {
-          currentValue = value;
-        })
-      );
-
-      return {
-        // getCurrentValue may be implemented by subscribing to the
-        // given source and immediately unsubscribing. Only synchronous
-        // values will therefore reach our `onPush` callback.
-        getCurrentValue(): T {
-          if (!hasUpdate) publish(updateValue).unsubscribe();
-          return currentValue;
-        },
-        // subscribe is just a regular subscription, but it also tracks
-        // `hasUpdate`. If we're subscribed and receive a new value we
-        // set `hasUpdate` to avoid `getCurrentValue` trying to subscribe
-        // again.
-        subscribe(onValue: () => void): Unsubscribe {
-          hasUpdate = true;
-          const { unsubscribe } = pipe(updateValue, subscribe(onValue));
-          return () => {
-            unsubscribe();
-            hasUpdate = false;
-          };
-        },
-      };
-    }, [source])
-  );
+let currentInit = false;
+
+export const useSource = <T>(source: Source<T>, init: T): T => {
+  const [state, setState] = useState(() => {
+    currentInit = true;
+    let initialValue = init;
+
+    pipe(
+      source,
+      onPush(value => {
+        initialValue = value;
+      }),
+      publish
+    ).unsubscribe();
+
+    currentInit = false;
+    return initialValue;
+  });
+
+  useEffect(() => {
+    return pipe(
+      source,
+      subscribe(value => {
+        if (!currentInit) {
+          setState(value);
+        }
+      })
+    ).unsubscribe as () => void;
+  }, [source]);
+
+  return state;
+};
 
 export const useBehaviourSubject = <T>(value: T) => {
   const client = useClient();

yarn.lock

@@ -1883,10 +1883,6 @@
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
 
-"@types/use-subscription@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/use-subscription/-/use-subscription-1.0.0.tgz#d146f8d834f70f50d48bd8246a481d096f11db19"
-
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -13048,13 +13044,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.1.1.tgz#5509363e9bb152c4fb334151d4dceb943beaa7bb"
   integrity sha512-gk4fPTYvNhs6Ia7u8/+K7bM7sZ7O7AMfWtS+zPO8luH+zWuiGgGcrW0hL4MRWZSzXo+4ofNorf87wZwBKz2YdQ==
 
-use-subscription@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.4.0.tgz#c4e808cfed6fe6e1ac875df1369c63f3ddae9522"
-  integrity sha512-R7P7JWpeHp+dtEYsgDzIIgOmVqRfJjRjLOO0YIYk6twctUkUYe6Tz0pcabyTDGcMMRt9uMbFMfwBfxKHg9gCSw==
-  dependencies:
-    object-assign "^4.1.1"
-
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"