change for a performance optimization

apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -37,26 +37,26 @@ export const PagePathHeader: FC<Props> = (props) => {
 
   const { t } = useTranslation();
 
-  const onRenameFinish = () => {
+  const onRenameFinish = useCallback(() => {
     setRenameInputShown(false);
-  };
+  }, []);
 
-  const onRenameFailure = () => {
+  const onRenameFailure = useCallback(() => {
     setRenameInputShown(true);
-  };
+  }, []);
 
-  const onInputChange = (inputText: string) => {
+  const onInputChange = useCallback((inputText: string) => {
     setEditedPagePath(inputText);
-  };
+  }, []);
 
-  const onPressEnter = () => {
+  const onPressEnter = useCallback(() => {
     pagePathRenameHandler(editedPagePath, onRenameFinish, onRenameFailure);
-  };
+  }, [editedPagePath, onRenameFailure, onRenameFinish, pagePathRenameHandler]);
 
-  const onPressEscape = () => {
+  const onPressEscape = useCallback(() => {
     setEditedPagePath(currentPagePath);
     setRenameInputShown(false);
-  };
+  }, [currentPagePath]);
 
   const onClickEditButton = useCallback(() => {
     if (isRenameInputShown) {

apps/app/src/components/PageHeader/PageTitleHeader.tsx

@@ -30,13 +30,13 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
   const editedPageTitle = nodePath.basename(editedPagePath);
 
-  const onRenameFinish = () => {
+  const onRenameFinish = useCallback(() => {
     setRenameInputShown(false);
-  };
+  }, []);
 
-  const onRenameFailure = () => {
+  const onRenameFailure = useCallback(() => {
     setRenameInputShown(true);
-  };
+  }, []);
 
   const onInputChange = useCallback((inputText: string) => {
     const parentPagePath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path));
@@ -45,23 +45,23 @@ export const PageTitleHeader: FC<Props> = (props) => {
     setEditedPagePath(newPagePath);
   }, [currentPage?.path, setEditedPagePath]);
 
-  const onPressEnter = () => {
+  const onPressEnter = useCallback(() => {
     pagePathRenameHandler(editedPagePath, onRenameFinish, onRenameFailure);
-  };
+  }, [editedPagePath, onRenameFailure, onRenameFinish, pagePathRenameHandler]);
 
-  const onPressEscape = () => {
+  const onPressEscape = useCallback(() => {
     setEditedPagePath(currentPagePath);
     setRenameInputShown(false);
-  };
+  }, [currentPagePath]);
 
-  const onClickButton = () => {
+  const onClickButton = useCallback(() => {
     pagePathRenameHandler(editedPagePath, onRenameFinish, onRenameFailure);
-  };
+  }, [editedPagePath, onRenameFailure, onRenameFinish, pagePathRenameHandler]);
 
-  const onClickPageTitle = () => {
+  const onClickPageTitle = useCallback(() => {
     setEditedPagePath(currentPagePath);
     setRenameInputShown(true);
-  };
+  }, [currentPagePath]);
 
   const PageTitle = <div onClick={onClickPageTitle}>{pageTitle}</div>;