fix: fix all Components memory leak in your application.

package.json

@@ -88,15 +88,13 @@
     "lint-staged": "^10.2.7",
     "prettier": "^2.0.5",
     "pretty-quick": "^2.0.1",
+    "rimraf": "^3.0.2",
     "stylelint": "^13.5.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "4.1.0",
     "ts-jest": "26.1.0",
     "ts-node-dev": "^1.0.0-pre.44",
     "tsconfig-paths": "^3.8.0",
     "typescript": "3.9.3"
-  },
-  "dependencies": {
-    "rimraf": "^3.0.2"
   }
 }

packages/leaa-dashboard/src/components/AttachmentBox/AttachmentBox.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Tooltip } from 'antd';
 
 import { IAttachmentParams, IAutoUpdateRelation } from '@leaa/common/src/interfaces';
@@ -59,6 +59,8 @@ interface IProps {
 export const AttachmentBox = (props: IProps) => {
   const { t, i18n } = useTranslation();
 
+  const isAjaxCancelled = useRef(false);
+
   const type = props.type || 'list';
   const cardHeight = props.cardHeight || 230;
   const listHeight = props.listHeight || 130;
@@ -88,7 +90,9 @@ export const AttachmentBox = (props: IProps) => {
     ajax
       .get(`${envConfig.API_URL}/${envConfig.API_VERSION}/attachments`, { params: genCrudRequestQuery(params) })
       .then((res: IHttpRes<ICrudListRes<Attachment>>) => {
-        setAttachments(_.orderBy(res.data.data.data, ['status', 'sort'], ['desc', 'asc']) || []);
+        if (!isAjaxCancelled.current) {
+          setAttachments(_.orderBy(res.data.data.data, ['status', 'sort'], ['desc', 'asc']) || []);
+        }
       })
       .catch((err: IHttpError) => errorMsg(err.response?.data?.message || err.message))
       .finally(() => setListLoading(false));
@@ -99,6 +103,11 @@ export const AttachmentBox = (props: IProps) => {
       setAttachmentParams(props.attachmentParams);
       onFetchList();
     }
+
+    return () => {
+      isAjaxCancelled.current = true;
+    };
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.attachmentParams]);
 

packages/leaa-dashboard/src/components/SelectCategoryIdByTree/SelectCategoryIdByTree.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import cx from 'classnames';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { TreeSelect } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { TreeSelectProps } from 'antd/es/tree-select';
@@ -31,9 +31,10 @@ interface IProps {
 export const SelectCategoryIdByTree = (props: IProps) => {
   const { t } = useTranslation();
 
+  const isAjaxCancelled = useRef(false);
+
   const [tree, setTree] = useState<TreeItem[]>([]);
   const [treeLoading, setTreeLoading] = useState(false);
-
   const [value, setValue] = useState<string | string[] | undefined | null>(props.value || props.initialValues);
 
   const onFetchCategories = (params: ICategoriesQuery = { expanded: true, parentSlug: props?.parentSlug }) => {
@@ -42,7 +43,7 @@ export const SelectCategoryIdByTree = (props: IProps) => {
     ajax
       .get(`${envConfig.API_URL}/${envConfig.API_VERSION}/categories/tree`, { params })
       .then((res: IHttpRes<TreeItem[]>) => {
-        setTree(res.data?.data);
+        if (!isAjaxCancelled.current) setTree(res.data?.data);
       })
       .catch((err: IHttpError) => errorMsg(err.response?.data?.message || err.message))
       .finally(() => setTreeLoading(false));
@@ -54,27 +55,31 @@ export const SelectCategoryIdByTree = (props: IProps) => {
     if (props.onChange) props.onChange(v);
   };
 
+  const multipleSelectOption = props.multipleSelect
+    ? {
+        treeCheckable: true,
+        // showCheckedStrategy: SHOW_PARENT,
+        // multiple: true,
+      }
+    : {};
+
   useEffect(() => {
     if (props.initialValues) {
       onChange(props.value || props.initialValues);
     } else {
       setValue(props.value || props.initialValues);
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.value, props.initialValues]);
 
-  const multipleSelectOption = props.multipleSelect
-    ? {
-        treeCheckable: true,
-        // showCheckedStrategy: SHOW_PARENT,
-        // multiple: true,
-      }
-    : {};
-
   useEffect(() => {
     onFetchCategories();
 
-    return setTree([]);
+    return () => {
+      isAjaxCancelled.current = true;
+    };
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

packages/leaa-dashboard/src/components/TagSearchBox/TagSearchBox.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef, useCallback } from 'react';
+import React, { useState, useEffect, forwardRef, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import cx from 'classnames';
 import _ from 'lodash';
@@ -28,6 +28,8 @@ const DEBOUNCE_MS = 300;
 export const TagSearchBox = forwardRef((props: IProps, ref: React.Ref<any>) => {
   const { t } = useTranslation();
 
+  const isAjaxCancelled = useRef(false);
+
   const [inputKey, setInputKey] = useState<string | undefined>(props.value);
   const [optionalTags, setOptionalTags] = useState<TagEntry[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
@@ -50,7 +52,7 @@ export const TagSearchBox = forwardRef((props: IProps, ref: React.Ref<any>) => {
         } as CreateQueryParams,
       })
       .then((res: IHttpRes<ICrudListRes<TagEntry>>) => {
-        if (res.data?.data?.data && !_.isEmpty(res.data.data.data)) {
+        if (res.data?.data?.data && !_.isEmpty(res.data.data.data) && !isAjaxCancelled.current) {
           return setOptionalTags(res.data?.data?.data as TagEntry[]);
         }
 
@@ -66,6 +68,7 @@ export const TagSearchBox = forwardRef((props: IProps, ref: React.Ref<any>) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const onSearch = useCallback(
     _.debounce((v?: string) => onFetchTags(v), DEBOUNCE_MS),
+
     [],
   );