fix: 🐛 prevent memory leak during component unmount

keen · Oct 30, 2020 · 1092c8a · 1092c8a
1 parent 404872c
commit 1092c8a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/lib/js/app/components/ActionsMenu/ActionsMenu.tsx b/lib/js/app/components/ActionsMenu/ActionsMenu.tsx
@@ -35,9 +35,16 @@ type Props = {
   onRemoveQuery: () => void;
   /** Hide menu */
   onHideMenu: () => void;
+  /** Visibility indicator  */
+  isVisible?: boolean;
 };
 
-const ActionsMenu: FC<Props> = ({ isNewQuery, onRemoveQuery, onHideMenu }) => {
+const ActionsMenu: FC<Props> = ({
+  isNewQuery,
+  isVisible,
+  onRemoveQuery,
+  onHideMenu,
+}) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
@@ -46,13 +53,18 @@ const ActionsMenu: FC<Props> = ({ isNewQuery, onRemoveQuery, onHideMenu }) => {
   const {
     keenAnalysis: { config },
   } = useContext(AppContext);
+
   return (
     <Container>
       <DropdownMenu.Container>
         <MutedText>{t('actions_menu.export_result')}</MutedText>
         <ExportDataWrapper
-          onMouseEnter={() => !queryResults && showTooltip(true)}
-          onMouseLeave={() => tooltip && showTooltip(false)}
+          onMouseEnter={() => {
+            if (isVisible && !queryResults) {
+              showTooltip(true);
+            }
+          }}
+          onMouseLeave={() => tooltip && isVisible && showTooltip(false)}
         >
           <AnimatePresence>
             {tooltip && (

diff --git a/lib/js/app/components/BrowserQueryMenu/BrowserQueryMenu.tsx b/lib/js/app/components/BrowserQueryMenu/BrowserQueryMenu.tsx
@@ -120,6 +120,7 @@ const BrowserQueryMenu: FC<Props> = ({ onEditQuery, onRemoveQuery }) => {
           >
             <ActionsMenu
               isNewQuery={false}
+              isVisible={actionsMenu}
               onHideMenu={() => setActionsMenuVisibility(false)}
               onRemoveQuery={() => {
                 setActionsMenuVisibility(false);

diff --git a/lib/js/app/components/EditorNavigation/EditorNavigation.tsx b/lib/js/app/components/EditorNavigation/EditorNavigation.tsx
@@ -180,6 +180,7 @@ const EditorNavigation: FC<Props> = ({ onSaveQuery }) => {
           >
             <ActionsMenu
               isNewQuery={!exists}
+              isVisible={actionsMenu}
               onHideMenu={() => setActionsMenuVisibility(false)}
               onRemoveQuery={() => {
                 setActionsMenuVisibility(false);