optimized

packages/app/src/client/services/page-operation.ts

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import { SubscriptionStatusType, Nullable } from '@growi/core';
 import urljoin from 'url-join';
 
@@ -130,7 +132,7 @@ export const useSaveOrUpdate = (): SaveOrUpdateFunction => {
   const { mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
   /* eslint-enable react-hooks/rules-of-hooks */
 
-  return async function(markdown: string, pageInfo: PageInfo, optionsToSave?: OptionsToSave) {
+  return useCallback(async(markdown: string, pageInfo: PageInfo, optionsToSave?: OptionsToSave) => {
     const { path, pageId, revisionId } = pageInfo;
 
     const options: OptionsToSave = Object.assign({}, optionsToSave);
@@ -172,7 +174,7 @@ export const useSaveOrUpdate = (): SaveOrUpdateFunction => {
     await mutateIsEnabledUnsavedWarning(new Promise(r => setTimeout(() => r(false), 10)), { optimisticData: () => false });
 
     return res;
-  };
+  }, [mutateIsEnabledUnsavedWarning]);
 };
 
 export const useUpdateStateAfterSave = (pageId: string|undefined|null): (() => Promise<void>) | undefined => {
@@ -183,10 +185,10 @@ export const useUpdateStateAfterSave = (pageId: string|undefined|null): (() => P
   const { sync: syncTagsInfoForEditor } = usePageTagsForEditors(pageId);
   const { mutate: mutateEditingMarkdown } = useEditingMarkdown();
 
-  if (pageId == null) { return }
-
   // update swr 'currentPageId', 'currentPage', remote states
-  return async() => {
+  return useCallback(async() => {
+    if (pageId == null) { return }
+
     await mutateCurrentPageId(pageId);
     const updatedPage = await mutateCurrentPage();
 
@@ -207,7 +209,7 @@ export const useUpdateStateAfterSave = (pageId: string|undefined|null): (() => P
     };
 
     setRemoteLatestPageData(remoterevisionData);
-  };
+  }, [mutateCurrentPage, mutateCurrentPageId, mutateEditingMarkdown, mutateTagsInfo, pageId, setRemoteLatestPageData, syncTagsInfoForEditor]);
 };
 
 export const unlink = async(path: string): Promise<void> => {

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -1182,6 +1182,8 @@ CodeMirrorEditor.defaultProps = {
   lineNumbers: true,
 };
 
+const CodeMirrorEditorMemoized = memo(CodeMirrorEditor);
+
 
 const CodeMirrorEditorFc = React.forwardRef((props, ref) => {
   const { open: openDrawioModal } = useDrawioModal();
@@ -1196,7 +1198,7 @@ const CodeMirrorEditorFc = React.forwardRef((props, ref) => {
   }, [openHandsontableModal]);
 
   return (
-    <CodeMirrorEditor
+    <CodeMirrorEditorMemoized
       ref={ref}
       onClickDrawioBtn={openDrawioModalHandler}
       onClickTableBtn={openTableModalHandler}

packages/app/src/stores/editor.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import { Nullable, withUtils, SWRResponseWithUtils } from '@growi/core';
 import useSWR, { SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
@@ -109,13 +111,14 @@ export type IPageTagsForEditorsOption = {
 export const usePageTagsForEditors = (pageId: Nullable<string>): SWRResponse<string[], Error> & IPageTagsForEditorsOption => {
   const { data: tagsInfoData } = useSWRxTagsInfo(pageId);
   const swrResult = useStaticSWR<string[], Error>('pageTags', undefined);
+  const { mutate } = swrResult;
+  const sync = useCallback((): void => {
+    mutate(tagsInfoData?.tags || [], false);
+  }, [mutate, tagsInfoData?.tags]);
 
   return {
     ...swrResult,
-    sync: (): void => {
-      const { mutate } = swrResult;
-      mutate(tagsInfoData?.tags || [], false);
-    },
+    sync,
   };
 };
 

packages/app/src/stores/remote-latest-page.ts

@@ -1,3 +1,5 @@
+import { useMemo, useCallback } from 'react';
+
 import { SWRResponse } from 'swr';
 
 import { IUser } from '~/interfaces/user';
@@ -41,7 +43,7 @@ export const useSetRemoteLatestPageData = (): { setRemoteLatestPageData: (pageDa
   const { mutate: mutateRevisionIdHackmdSynced } = useRevisionIdHackmdSynced();
   const { mutate: mutateHasDraftOnHackmd } = useHasDraftOnHackmd();
 
-  const setRemoteLatestPageData = (remoteRevisionData: RemoteRevisionData) => {
+  const setRemoteLatestPageData = useCallback((remoteRevisionData: RemoteRevisionData) => {
     const {
       remoteRevisionId, remoteRevisionBody, remoteRevisionLastUpdateUser, remoteRevisionLastUpdatedAt, revisionIdHackmdSynced, hasDraftOnHackmd,
     } = remoteRevisionData;
@@ -51,10 +53,13 @@ export const useSetRemoteLatestPageData = (): { setRemoteLatestPageData: (pageDa
     mutateRemoteRevisionLastUpdatedAt(remoteRevisionLastUpdatedAt);
     mutateRevisionIdHackmdSynced(revisionIdHackmdSynced);
     mutateHasDraftOnHackmd(hasDraftOnHackmd);
-  };
+  // eslint-disable-next-line max-len
+  }, [mutateHasDraftOnHackmd, mutateRemoteRevisionBody, mutateRemoteRevisionId, mutateRemoteRevisionLastUpdateUser, mutateRemoteRevisionLastUpdatedAt, mutateRevisionIdHackmdSynced]);
 
-  return {
-    setRemoteLatestPageData,
-  };
+  return useMemo(() => {
+    return {
+      setRemoteLatestPageData,
+    };
+  }, [setRemoteLatestPageData]);
 
 };