From 8fc26223c26e2fe642414f28c8486fd1ef44349d Mon Sep 17 00:00:00 2001 From: Bond Yan Date: Thu, 11 Jul 2024 11:20:17 -0400 Subject: [PATCH] setting useNavigate in a ref Signed-off-by: Bond Yan --- .changeset/chatty-adults-boil.md | 5 +++++ .../TechDocsReaderPageContent/useNavigateUrl.tsx | 9 +++++---- 2 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 .changeset/chatty-adults-boil.md diff --git a/.changeset/chatty-adults-boil.md b/.changeset/chatty-adults-boil.md new file mode 100644 index 0000000000..76f3bddf41 --- /dev/null +++ b/.changeset/chatty-adults-boil.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Fixed an issue that was causing techdocs pages unnecessarily re-render on navigate. diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/useNavigateUrl.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/useNavigateUrl.tsx index 02d181dccf..f036edef65 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/useNavigateUrl.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageContent/useNavigateUrl.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import { configApiRef, useApi } from '@backstage/core-plugin-api'; -import { useCallback } from 'react'; +import { useCallback, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; /** @@ -53,7 +53,8 @@ export function resolveUrlToRelative(url: string, baseUrl: string) { * @public */ export function useNavigateUrl() { - const navigate = useNavigate(); + // useRef prevents useNavigate from causing unnecessary re-renders + const navigate = useRef(useNavigate()); const configApi = useApi(configApiRef); const appBaseUrl = configApi.getOptionalString('app.baseUrl'); const navigateFn = useCallback( @@ -70,9 +71,9 @@ export function useNavigateUrl() { // URL passed in was relative. } } - navigate(url); + navigate.current(url); }, - [navigate, appBaseUrl], + [appBaseUrl], ); return navigateFn; }