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; }