Просмотр исходного кода

improve performance of components

kosei-n 2 лет назад
Родитель
Сommit
a7234c28e9

+ 7 - 5
apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -1,4 +1,6 @@
-import { useMemo, useState, useEffect } from 'react';
+import {
+  useMemo, useState, useEffect, useCallback,
+} from 'react';
 import type { FC } from 'react';
 import type { FC } from 'react';
 
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import type { IPagePopulatedToShowRevision } from '@growi/core';
@@ -61,24 +63,24 @@ export const PagePathHeader: FC<Props> = (props) => {
     setEditedPagePath(inputText);
     setEditedPagePath(inputText);
   };
   };
 
 
-  const handleEditButtonClick = () => {
+  const handleEditButtonClick = useCallback(() => {
     if (isRenameInputShown) {
     if (isRenameInputShown) {
       pagePathRenameHandler(editedPagePath);
       pagePathRenameHandler(editedPagePath);
     }
     }
     else {
     else {
       setRenameInputShown(true);
       setRenameInputShown(true);
     }
     }
-  };
+  }, [editedPagePath, isRenameInputShown, pagePathRenameHandler]);
 
 
   const buttonStyle = isButtonsShown ? '' : 'd-none';
   const buttonStyle = isButtonsShown ? '' : 'd-none';
 
 
-  const clickOutSideHandler = (e) => {
+  const clickOutSideHandler = useCallback((e) => {
     const container = document.getElementById('page-path-header');
     const container = document.getElementById('page-path-header');
 
 
     if (container && !container.contains(e.target)) {
     if (container && !container.contains(e.target)) {
       setRenameInputShown(false);
       setRenameInputShown(false);
     }
     }
-  };
+  }, []);
 
 
   useEffect(() => {
   useEffect(() => {
     document.addEventListener('click', clickOutSideHandler);
     document.addEventListener('click', clickOutSideHandler);

+ 3 - 5
apps/app/src/components/PageHeader/PageTitleHeader.tsx

@@ -1,7 +1,5 @@
 import type { FC } from 'react';
 import type { FC } from 'react';
-import {
-  useState, useMemo,
-} from 'react';
+import { useState, useMemo, useCallback } from 'react';
 
 
 import nodePath from 'path';
 import nodePath from 'path';
 
 
@@ -39,12 +37,12 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
 
   const PageTitle = useMemo(() => (<div onClick={() => setRenameInputShown(true)}>{pageTitle}</div>), [pageTitle]);
   const PageTitle = useMemo(() => (<div onClick={() => setRenameInputShown(true)}>{pageTitle}</div>), [pageTitle]);
 
 
-  const handleInputChange = (inputText: string) => {
+  const handleInputChange = useCallback((inputText: string) => {
     const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path ?? ''));
     const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path ?? ''));
     const newPagePath = nodePath.resolve(parentPath, inputText);
     const newPagePath = nodePath.resolve(parentPath, inputText);
 
 
     setEditedPagePath(newPagePath);
     setEditedPagePath(newPagePath);
-  };
+  }, [currentPage.path, setEditedPagePath]);
 
 
   const buttonStyle = isRenameInputShown ? '' : 'd-none';
   const buttonStyle = isRenameInputShown ? '' : 'd-none';