From 66dab36883f64f90e80bb27722621c5a77a5de5f Mon Sep 17 00:00:00 2001
From: Nathan Knight <knathanknight@gmail.com>
Date: Fri, 28 Apr 2023 10:24:09 -0400
Subject: [PATCH 1/3] Fix re-rendering when another component reuses the same
 query without a change in the result

---
 .changeset/fifty-sheep-battle.md       |  5 +++++
 CONTRIBUTING.md                        |  2 +-
 packages/react-urql/src/hooks/state.ts | 21 ++++++++++++++++-----
 3 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fifty-sheep-battle.md

diff --git a/.changeset/fifty-sheep-battle.md b/.changeset/fifty-sheep-battle.md
new file mode 100644
index 0000000000..4a2ae74531
--- /dev/null
+++ b/.changeset/fifty-sheep-battle.md
@@ -0,0 +1,5 @@
+---
+'urql': patch
+---
+
+Fix re-rendering when another component reuses the same query without a change in the result
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e263eb7dad..6d47c40a29 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -75,7 +75,7 @@ There are multiple commands you can run in the root folder to test your changes:
 
 ```sh
 # TypeScript checks:
-pnpnm run check
+pnpm run check
 
 # Linting (prettier & eslint):
 pnpm run lint
diff --git a/packages/react-urql/src/hooks/state.ts b/packages/react-urql/src/hooks/state.ts
index c145b47748..c594592076 100644
--- a/packages/react-urql/src/hooks/state.ts
+++ b/packages/react-urql/src/hooks/state.ts
@@ -9,10 +9,21 @@ export const initialState = {
   operation: undefined,
 };
 
-const isShallowDifferent = (a: any, b: any) => {
-  if (typeof a != 'object' || typeof b != 'object') return a !== b;
-  for (const x in a) if (!(x in b)) return true;
-  for (const x in b) if (a[x] !== b[x]) return true;
+/**
+ * Checks if two objects are shallowly different with a special case for
+ * 'operation' where it compares the key if they are not the otherwise equal
+ */
+const isShallowDifferent = <T extends Record<string, any>>(a: T, b: T) => {
+  for (const key in a) if (!(key in b)) return true;
+  for (const key in b) {
+    if (a[key] !== b[key]) {
+      // Two operations are considered equal if they have the same key
+      if (key === 'operation' && a.operation?.key === b.operation?.key) {
+        continue;
+      }
+      return true;
+    }
+  }
   return false;
 };
 
@@ -27,7 +38,7 @@ export const computeNextState = <T extends Stateish>(
   prevState: T,
   result: Partial<T>
 ): T => {
-  const newState = {
+  const newState: T = {
     ...prevState,
     ...result,
     data:

From 21e14d7cc1b05660be85ebc63f0d72847376cf98 Mon Sep 17 00:00:00 2001
From: Nathan <knathanknight@gmail.com>
Date: Fri, 28 Apr 2023 11:01:50 -0400
Subject: [PATCH 2/3] Adjust changeset

Co-authored-by: Phil Pluckthun <phil@kitten.sh>
---
 .changeset/fifty-sheep-battle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/fifty-sheep-battle.md b/.changeset/fifty-sheep-battle.md
index 4a2ae74531..30fab153c6 100644
--- a/.changeset/fifty-sheep-battle.md
+++ b/.changeset/fifty-sheep-battle.md
@@ -2,4 +2,4 @@
 'urql': patch
 ---
 
-Fix re-rendering when another component reuses the same query without a change in the result
+Avoid unnecessary re-render when two components use the same query but receive unchanging results, due to differing operations

From d48ab6d78e96e2836c15844fca4cbc5cd9aff483 Mon Sep 17 00:00:00 2001
From: Nathan Knight <knathanknight@gmail.com>
Date: Fri, 28 Apr 2023 11:11:48 -0400
Subject: [PATCH 3/3] Refactor isShallowDifferent to not use optional chaining

---
 packages/react-urql/src/hooks/state.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/react-urql/src/hooks/state.ts b/packages/react-urql/src/hooks/state.ts
index c594592076..bf8d4f4ad3 100644
--- a/packages/react-urql/src/hooks/state.ts
+++ b/packages/react-urql/src/hooks/state.ts
@@ -9,6 +9,14 @@ export const initialState = {
   operation: undefined,
 };
 
+// Two operations are considered equal if they have the same key
+const areOperationsEqual = (
+  a: { key: number } | undefined,
+  b: { key: number } | undefined
+) => {
+  return a === b || !!(a && b && a.key === b.key);
+};
+
 /**
  * Checks if two objects are shallowly different with a special case for
  * 'operation' where it compares the key if they are not the otherwise equal
@@ -16,11 +24,11 @@ export const initialState = {
 const isShallowDifferent = <T extends Record<string, any>>(a: T, b: T) => {
   for (const key in a) if (!(key in b)) return true;
   for (const key in b) {
-    if (a[key] !== b[key]) {
-      // Two operations are considered equal if they have the same key
-      if (key === 'operation' && a.operation?.key === b.operation?.key) {
-        continue;
-      }
+    if (
+      key === 'operation'
+        ? !areOperationsEqual(a[key], b[key])
+        : a[key] !== b[key]
+    ) {
       return true;
     }
   }