fix(composer): unsubscribe to queries when unmounting

awslabs · May 24, 2023 · 15fe82e · 15fe82e
1 parent 6accf68
commit 15fe82e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/packages/scene-composer/src/components/StateManager.tsx b/packages/scene-composer/src/components/StateManager.tsx
@@ -354,9 +354,6 @@ const StateManager: React.FC<SceneComposerInternalProps> = ({
   }, [queriedStreams, dataStreams]);
 
   useEffect(() => {
-    if (dataProviderRef.current) {
-      dataProviderRef.current.unsubscribe();
-    }
     if (queries && viewport) {
       dataProviderRef.current = combineProviders(
         queries.map((query) =>
@@ -376,6 +373,11 @@ const StateManager: React.FC<SceneComposerInternalProps> = ({
         },
       });
     }
+
+    return () => {
+      dataProviderRef.current?.unsubscribe();
+      dataProviderRef.current = undefined;
+    };
   }, [queries, viewport]);
 
   useEffect(() => {

diff --git a/packages/scene-composer/tests/StateManager.spec.tsx b/packages/scene-composer/tests/StateManager.spec.tsx
@@ -342,6 +342,26 @@ describe('StateManager', () => {
     expect(mockBuild).toBeCalledTimes(3);
     expect(mockCombinedPrvider.subscribe).toBeCalledTimes(2);
     expect(mockCombinedPrvider.unsubscribe).toBeCalledTimes(1);
+
+    // unsubscribe after unmount
+    await act(async () => {
+      container.unmount(
+        <StateManager
+          viewport={viewport}
+          sceneLoader={mockSceneLoader}
+          sceneMetadataModule={mockSceneMetadataModule}
+          config={sceneConfig}
+          queries={[{ build: mockBuild, toQueryString: () => 'mockQueryString' }]}
+          onSceneUpdated={jest.fn()}
+        />,
+      );
+      // Wait for async call
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    });
+
+    expect(mockBuild).toBeCalledTimes(3);
+    expect(mockCombinedPrvider.subscribe).toBeCalledTimes(2);
+    expect(mockCombinedPrvider.unsubscribe).toBeCalledTimes(2);
   });
 
   it('should call setActiveCameraSettings if selected node has camera component', async () => {