pref: add useCallback/useMemo (#36877)

* refactor: rewrite header by FunctionComponent

* refactor: rewrite footer by FunctionComponent

* fix: strong type

* refactor: rewrite IconDisplay & PicSearcher & Category by FunctionComponent

* style: formatting

* pref: add useCallback/useMemo

site/theme/template/IconDisplay/Category.tsx

@@ -17,7 +17,7 @@ const Category: React.FC<CategoryProps> = props => {
   const { icons, title, newIcons, theme, intl } = props;
   const [justCopied, setJustCopied] = React.useState<string | null>(null);
   const copyId = React.useRef<NodeJS.Timeout | null>(null);
-  const onCopied = (type: string, text: string) => {
+  const onCopied = React.useCallback((type: string, text: string) => {
     message.success(
       <span>
         <code className="copied-code">{text}</code> copied 🎉
@@ -27,7 +27,7 @@ const Category: React.FC<CategoryProps> = props => {
     copyId.current = setTimeout(() => {
       setJustCopied(null);
     }, 2000);
-  };
+  }, []);
   React.useEffect(
     () => () => {
       if (copyId.current) {

site/theme/template/IconDisplay/IconPicSearcher.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Upload, Tooltip, Popover, Modal, Progress, message, Spin, Result } from 'antd';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { injectIntl } from 'react-intl';
@@ -73,7 +73,7 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
       };
     });
 
-  const uploadFile = (file: File) => {
+  const uploadFile = useCallback((file: File) => {
     setState(prev => ({ ...prev, loading: true }));
     const reader = new FileReader();
     reader.onload = () => {
@@ -84,8 +84,9 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
       }));
     };
     reader.readAsDataURL(file);
-  };
-  const onPaste = (event: ClipboardEvent) => {
+  }, []);
+
+  const onPaste = useCallback((event: ClipboardEvent) => {
     const items = event.clipboardData && event.clipboardData.items;
     let file = null;
     if (items && items.length) {
@@ -99,8 +100,8 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
     if (file) {
       uploadFile(file);
     }
-  };
-  const toggleModal = () => {
+  }, []);
+  const toggleModal = useCallback(() => {
     setState(prev => ({
       ...prev,
       modalVisible: !prev.modalVisible,
@@ -111,15 +112,15 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
     if (!localStorage.getItem('disableIconTip')) {
       localStorage.setItem('disableIconTip', 'true');
     }
-  };
+  }, []);
   // eslint-disable-next-line class-methods-use-this
-  const onCopied = (text: string) => {
+  const onCopied = useCallback((text: string) => {
     message.success(
       <span>
         <code className="copied-code">{text}</code> copied 🎉
       </span>,
     );
-  };
+  }, []);
   useEffect(() => {
     const script = document.createElement('script');
     script.onload = async () => {

site/theme/template/IconDisplay/index.tsx

@@ -35,13 +35,19 @@ const IconDisplay: React.FC<IconDisplayProps> = ({ intl }) => {
   });
 
   const newIconNames: string[] = [];
-  const handleSearchIcon = debounce((searchKey: string) => {
-    setDisplayState(prevState => ({ ...prevState, searchKey }));
-  });
-  const handleChangeTheme = (e: RadioChangeEvent) => {
+
+  const handleSearchIcon = React.useCallback(
+    debounce((searchKey: string) => {
+      setDisplayState(prevState => ({ ...prevState, searchKey }));
+    }),
+    [],
+  );
+
+  const handleChangeTheme = React.useCallback((e: RadioChangeEvent) => {
     setDisplayState(prevState => ({ ...prevState, theme: e.target.value as ThemeType }));
-  };
-  const renderCategories = () => {
+  }, []);
+
+  const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
     const { searchKey = '', theme } = displayState;
 
     const categoriesResult = Object.keys(categories)
@@ -74,9 +80,8 @@ const IconDisplay: React.FC<IconDisplayProps> = ({ intl }) => {
           newIcons={newIconNames}
         />
       ));
-
     return categoriesResult.length === 0 ? <Empty style={{ margin: '2em 0' }} /> : categoriesResult;
-  };
+  }, [displayState.searchKey, displayState.theme]);
   return (
     <>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -106,7 +111,7 @@ const IconDisplay: React.FC<IconDisplayProps> = ({ intl }) => {
           suffix={<IconPicSearcher />}
         />
       </div>
-      {renderCategories()}
+      {renderCategories}
     </>
   );
 };