use useMemo instead of useCallback

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

@@ -1,4 +1,6 @@
-import { FC, useCallback, useState } from 'react';
+import {
+  FC, useMemo, useState,
+} from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 
@@ -35,19 +37,17 @@ export const PagePathHeader: FC<Props> = (props) => {
   const isViewMode = editorMode === EditorMode.View;
   const isEditorMode = !isViewMode;
 
-  const PagePath = useCallback(() => {
-    return (
-      <>
-        {currentPagePath != null && (
-          <PagePathNav
-            pageId={currentPage._id}
-            pagePath={currentPagePath}
-            isSingleLineMode={isEditorMode}
-          />
-        )}
-      </>
-    );
-  }, [currentPage._id, currentPagePath, isEditorMode]);
+  const PagePath = useMemo(() => (
+    <>
+      {currentPagePath != null && (
+        <PagePathNav
+          pageId={currentPage._id}
+          pagePath={currentPagePath}
+          isSingleLineMode={isEditorMode}
+        />
+      )}
+    </>
+  ), [currentPage._id, currentPagePath, isEditorMode]);
 
   const handleInputChange = (inputText: string) => {
     setInputText(inputText);

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

@@ -1,4 +1,4 @@
-import { FC, useState, useCallback } from 'react';
+import { FC, useState, useMemo } from 'react';
 
 import nodePath from 'path';
 
@@ -20,11 +20,7 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
   const stateHandler = { isRenameInputShown, setRenameInputShown };
 
-  const PageTitle = useCallback(() => {
-    return (
-      <div onClick={() => setRenameInputShown(true)}>{pageName}</div>
-    );
-  }, [pageName]);
+  const PageTitle = useMemo(() => (<div onClick={() => setRenameInputShown(true)}>{pageName}</div>), [pageName]);
 
   return (
     <TextInputForPageTitleAndPath

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

@@ -20,7 +20,7 @@ type Props = {
   currentPage: IPagePopulatedToShowRevision
   stateHandler: StateHandler
   inputValue: string
-  CustomComponent: () => JSX.Element
+  CustomComponent: JSX.Element
   handleInputChange?: (string) => void
 }
 
@@ -49,7 +49,7 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
           />
         </div>
       ) : (
-        <CustomComponent />
+        { CustomComponent }
       )}
     </>
   );