refactor: subscribe to vis color store on unmount

elastic · Nov 7, 2024 · 9aeec86 · 9aeec86
1 parent c4b2b7d
commit 9aeec86
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 18 deletions.
diff --git a/packages/eui/src-docs/src/views/color_palette/color_palette.js b/packages/eui/src-docs/src/views/color_palette/color_palette.js
@@ -54,10 +54,14 @@ export default () => {
   };
 
   useEffect(() => {
-    EUI_VIS_COLOR_STORE.subscribe(
+    const storeId = EUI_VIS_COLOR_STORE.subscribe(
       VIS_COLOR_STORE_EVENTS.UPDATE,
       handleVisColorThemeChange
     );
+
+    return () => {
+      EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId);
+    };
   }, []);
 
   return (

diff --git a/packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js b/packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js
@@ -49,10 +49,14 @@ export default () => {
   };
 
   useEffect(() => {
-    EUI_VIS_COLOR_STORE.subscribe(
+    const storeId = EUI_VIS_COLOR_STORE.subscribe(
       VIS_COLOR_STORE_EVENTS.UPDATE,
       handleVisColorThemeChange
     );
+
+    return () => {
+      EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId);
+    };
   }, []);
 
   return (

diff --git a/packages/eui/src-docs/src/views/color_picker/color_palette_display.js b/packages/eui/src-docs/src/views/color_picker/color_palette_display.js
@@ -91,9 +91,16 @@ export default () => {
   const [palettes, setPalettes] = useState(getPalettes());
 
   useEffect(() => {
-    EUI_VIS_COLOR_STORE.subscribe(VIS_COLOR_STORE_EVENTS.UPDATE, () => {
-      setPalettes(getPalettes());
-    });
+    const storeId = EUI_VIS_COLOR_STORE.subscribe(
+      VIS_COLOR_STORE_EVENTS.UPDATE,
+      () => {
+        setPalettes(getPalettes());
+      }
+    );
+
+    return () => {
+      EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId);
+    };
   }, [getPalettes]);
 
   const onChangeSize = (e) => {

diff --git a/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js b/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js
@@ -94,9 +94,16 @@ export default () => {
   const [selectedPalette, setSelectedPalette] = useState('palette_1');
 
   useEffect(() => {
-    EUI_VIS_COLOR_STORE.subscribe(VIS_COLOR_STORE_EVENTS.UPDATE, () => {
-      setPalettes(getPalettes());
-    });
+    const storeId = EUI_VIS_COLOR_STORE.subscribe(
+      VIS_COLOR_STORE_EVENTS.UPDATE,
+      () => {
+        setPalettes(getPalettes());
+      }
+    );
+
+    return () => {
+      EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId);
+    };
   }, []);
 
   return (

diff --git a/packages/eui/src-docs/src/views/elastic_charts/theming.tsx b/packages/eui/src-docs/src/views/elastic_charts/theming.tsx
@@ -69,9 +69,16 @@ export default () => {
   );
 
   useEffect(() => {
-    EUI_VIS_COLOR_STORE.subscribe(VIS_COLOR_STORE_EVENTS.UPDATE, () => {
-      setPalettes(getPalettes());
-    });
+    const storeId = EUI_VIS_COLOR_STORE.subscribe(
+      VIS_COLOR_STORE_EVENTS.UPDATE,
+      () => {
+        setPalettes(getPalettes());
+      }
+    );
+
+    return () => {
+      EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId);
+    };
   }, []);
 
   /**

diff --git a/...s/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx b/...s/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx
@@ -43,9 +43,16 @@ export const Playground: Story = {
 
     // subscribe to theme-related vis_color changes
     useEffect(() => {
-      EUI_VIS_COLOR_STORE.subscribe(VIS_COLOR_STORE_EVENTS.UPDATE, () => {
-        setPalette(euiPaletteColorBlind());
-      });
+      const storeId = EUI_VIS_COLOR_STORE.subscribe(
+        VIS_COLOR_STORE_EVENTS.UPDATE,
+        () => {
+          setPalette(euiPaletteColorBlind());
+        }
+      );
+
+      return () => {
+        EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId);
+      };
     }, []);
 
     useUpdateEffect(() => {

diff --git a/...ges/eui/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx b/...ges/eui/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx
@@ -68,9 +68,16 @@ export const Playground: Story = {
 
     // subscribe to theme-related vis_color changes
     useEffect(() => {
-      EUI_VIS_COLOR_STORE.subscribe(VIS_COLOR_STORE_EVENTS.UPDATE, () => {
-        setPalettes(getInitialPalettes());
-      });
+      const storeId = EUI_VIS_COLOR_STORE.subscribe(
+        VIS_COLOR_STORE_EVENTS.UPDATE,
+        () => {
+          setPalettes(getInitialPalettes());
+        }
+      );
+
+      return () => {
+        EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId);
+      };
     }, []);
 
     useUpdateEffect(() => {

diff --git a/packages/website/docs/components/utilities/color_palettes/overview.mdx b/packages/website/docs/components/utilities/color_palettes/overview.mdx
@@ -121,10 +121,14 @@ export default () => {
   };
 
   useEffect(() => {
-    EUI_VIS_COLOR_STORE.subscribe(
+    const storeId = EUI_VIS_COLOR_STORE.subscribe(
       VIS_COLOR_STORE_EVENTS.UPDATE,
       handleVisColorThemeChange
     );
+
+    return () => {
+      EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId);
+    };
   }, []);
 
   return (