From f4a452b3003f92f1e4dbcbfcc4c00d545a82bfc8 Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Thu, 27 Apr 2023 15:52:46 -0400
Subject: [PATCH] Avoid unnecessary router subscribes (#10409)

Co-authored-by: Alexander Nanberg <alex.nanberg@hotmail.com>
---
 .changeset/silent-stingrays-boil.md      |  5 +++++
 contributors.yml                         |  1 +
 packages/react-router/lib/components.tsx | 11 ++---------
 3 files changed, 8 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/silent-stingrays-boil.md

diff --git a/.changeset/silent-stingrays-boil.md b/.changeset/silent-stingrays-boil.md
new file mode 100644
index 0000000000..cb0320278e
--- /dev/null
+++ b/.changeset/silent-stingrays-boil.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Avoid uneccesary unsubscribe/resubscribes on router state changes
diff --git a/contributors.yml b/contributors.yml
index b2551439a8..c73c18999f 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -9,6 +9,7 @@
 - akamfoad
 - alany411
 - alberto
+- alexandernanberg
 - alexlbr
 - AmRo045
 - amsal
diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
index 9d9a40c10c..1c526b830d 100644
--- a/packages/react-router/lib/components.tsx
+++ b/packages/react-router/lib/components.tsx
@@ -57,17 +57,10 @@ export function RouterProvider({
   fallbackElement,
   router,
 }: RouterProviderProps): React.ReactElement {
-  let [state, setState] = React.useState(router.state);
-
   // Need to use a layout effect here so we are subscribed early enough to
   // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
-  React.useLayoutEffect(() => {
-    return router.subscribe((newState) => {
-      if (newState !== state) {
-        setState(newState);
-      }
-    });
-  }, [router, state]);
+  let [state, setState] = React.useState(router.state);
+  React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
 
   let navigator = React.useMemo((): Navigator => {
     return {