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/) - 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 {