Merge pull request #27594 from backstage/techdocs-fix-reader-state-re-render

Techdocs: fix re-rendering issue TechDocsReaderPageContent

.changeset/flat-rivers-smell.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Fixed an issue where `<TechDocsReaderPageContent />` would re-render infinitely under certain conditions.

plugins/techdocs/src/reader/components/useReaderState.test.tsx

@@ -687,5 +687,43 @@ describe('useReaderState', () => {
         expect.any(Function),
       );
     });
+
+    it('should return the same data if re-rendered', async () => {
+      techdocsStorageApi.getEntityDocs.mockResolvedValue('my content');
+      techdocsStorageApi.syncEntityDocs.mockImplementation(async () => {
+        return 'cached';
+      });
+
+      const { result, rerender } = renderHook(
+        () => useReaderState('Component', 'default', 'backstage', '/example'),
+        { wrapper: Wrapper },
+      );
+
+      expect(result.current).toEqual({
+        state: 'CHECKING',
+        path: '/example',
+        content: undefined,
+        contentErrorMessage: undefined,
+        syncErrorMessage: undefined,
+        buildLog: [],
+        contentReload: expect.any(Function),
+      });
+
+      await waitFor(() => {
+        expect(result.current).toEqual({
+          state: 'CONTENT_FRESH',
+          path: '/example',
+          content: 'my content',
+          contentErrorMessage: undefined,
+          syncErrorMessage: undefined,
+          buildLog: [],
+          contentReload: expect.any(Function),
+        });
+      });
+      const firstResult = result.current;
+
+      rerender();
+      expect(result.current).toBe(firstResult);
+    });
   });
 });

plugins/techdocs/src/reader/components/useReaderState.ts

@@ -343,13 +343,24 @@ export function useReaderState(
     [state.activeSyncState, state.content, state.contentLoading],
   );
 
-  return {
-    state: displayState,
-    contentReload,
-    path: state.path,
-    content: state.content,
-    contentErrorMessage: state.contentError?.toString(),
-    syncErrorMessage: state.syncError?.toString(),
-    buildLog: state.buildLog,
-  };
+  return useMemo(
+    () => ({
+      state: displayState,
+      contentReload,
+      path: state.path,
+      content: state.content,
+      contentErrorMessage: state.contentError?.toString(),
+      syncErrorMessage: state.syncError?.toString(),
+      buildLog: state.buildLog,
+    }),
+    [
+      displayState,
+      contentReload,
+      state.path,
+      state.content,
+      state.contentError,
+      state.syncError,
+      state.buildLog,
+    ],
+  );
 }