From 04462a274ad39b392142385a2f052abbf3014749 Mon Sep 17 00:00:00 2001
From: Jonathan Ehwald <github@ehwald.info>
Date: Tue, 3 Sep 2024 18:35:29 +0200
Subject: [PATCH] Fix useSubscription restart was not cached (#12044)

Co-authored-by: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
---
 .api-reports/api-report-react.api.md       |  2 +-
 .api-reports/api-report-react_hooks.api.md |  2 +-
 .api-reports/api-report.api.md             |  2 +-
 .changeset/old-ghosts-agree.md             |  5 +++++
 .size-limits.json                          |  2 +-
 src/react/hooks/useSubscription.ts         | 23 ++++++++++------------
 6 files changed, 19 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/old-ghosts-agree.md

diff --git a/.api-reports/api-report-react.api.md b/.api-reports/api-report-react.api.md
index 33cc0914821..dabdf2dbd1d 100644
--- a/.api-reports/api-report-react.api.md
+++ b/.api-reports/api-report-react.api.md
@@ -2228,7 +2228,7 @@ export interface UseReadQueryResult<TData = unknown> {
 
 // @public
 export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>>): {
-    restart(): void;
+    restart: () => void;
     loading: boolean;
     data?: TData | undefined;
     error?: ApolloError;
diff --git a/.api-reports/api-report-react_hooks.api.md b/.api-reports/api-report-react_hooks.api.md
index eb378482a4c..610a95212d8 100644
--- a/.api-reports/api-report-react_hooks.api.md
+++ b/.api-reports/api-report-react_hooks.api.md
@@ -2061,7 +2061,7 @@ export interface UseReadQueryResult<TData = unknown> {
 //
 // @public
 export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>>): {
-    restart(): void;
+    restart: () => void;
     loading: boolean;
     data?: TData | undefined;
     error?: ApolloError;
diff --git a/.api-reports/api-report.api.md b/.api-reports/api-report.api.md
index f995e1f4bdd..20848b2c922 100644
--- a/.api-reports/api-report.api.md
+++ b/.api-reports/api-report.api.md
@@ -2889,7 +2889,7 @@ export interface UseReadQueryResult<TData = unknown> {
 
 // @public
 export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>>): {
-    restart(): void;
+    restart: () => void;
     loading: boolean;
     data?: TData | undefined;
     error?: ApolloError;
diff --git a/.changeset/old-ghosts-agree.md b/.changeset/old-ghosts-agree.md
new file mode 100644
index 00000000000..b224b7afad8
--- /dev/null
+++ b/.changeset/old-ghosts-agree.md
@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Cache the `useSubscription` hook's `restart` function definition between re-renders.
diff --git a/.size-limits.json b/.size-limits.json
index 7b0839e8f80..3cafe22147e 100644
--- a/.size-limits.json
+++ b/.size-limits.json
@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 40242,
+  "dist/apollo-client.min.cjs": 40249,
   "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 33058
 }
diff --git a/src/react/hooks/useSubscription.ts b/src/react/hooks/useSubscription.ts
index 94037c319bd..cf6c31ebabe 100644
--- a/src/react/hooks/useSubscription.ts
+++ b/src/react/hooks/useSubscription.ts
@@ -304,19 +304,16 @@ export function useSubscription<
       : fallbackResult,
     () => fallbackResult
   );
-  return React.useMemo(
-    () => ({
-      ...ret,
-      restart() {
-        invariant(
-          !optionsRef.current.skip,
-          "A subscription that is skipped cannot be restarted."
-        );
-        setObservable(recreateRef.current());
-      },
-    }),
-    [ret]
-  );
+
+  const restart = React.useCallback(() => {
+    invariant(
+      !optionsRef.current.skip,
+      "A subscription that is skipped cannot be restarted."
+    );
+    setObservable(recreateRef.current());
+  }, [optionsRef, recreateRef]);
+
+  return React.useMemo(() => ({ ...ret, restart }), [ret, restart]);
 }
 
 function createSubscription<