Appropriately memoised

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

@@ -1,4 +1,5 @@
 import type { FC } from 'react';
+import { useMemo } from 'react';
 
 import { useSWRxCurrentPage } from '~/stores/page';
 
@@ -17,7 +18,8 @@ export const PageHeader: FC = () => {
   }
 
   return (
-    <div className={moduleClass}>
+    // <div className={moduleClass}>
+    <div className={`${moduleClass} w-100`}>
       <PagePathHeader
         currentPage={currentPage}
       />

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

@@ -1,5 +1,5 @@
 import {
-  useState, useEffect, useCallback,
+  useState, useEffect, useCallback, memo, useMemo,
 } from 'react';
 import type { CSSProperties, FC } from 'react';
 
@@ -26,7 +26,7 @@ type Props = {
   currentPage: IPagePopulatedToShowRevision
 }
 
-export const PagePathHeader: FC<Props> = (props) => {
+export const PagePathHeader: FC<Props> = memo((props: Props) => {
   const { t } = useTranslation();
   const { currentPage } = props;
 
@@ -39,7 +39,9 @@ export const PagePathHeader: FC<Props> = (props) => {
   const [isHover, setHover] = useState(false);
   const [editingParentPagePath, setEditingParentPagePath] = useState(parentPagePath);
 
-  const [subNavElemWidth, setSubNavElemWidth] = useState(0);
+  // const [rerenderTest, setRerenderTest] = useState(0);
+
+  // const [subNavElemWidth, setSubNavElemWidth] = useState(0);
   const [isIconHidden, setIsIconHidden] = useState(false);
 
   const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
@@ -101,11 +103,36 @@ export const PagePathHeader: FC<Props> = (props) => {
 
     setIsIconHidden(linkElemWidth > areaElemWidth);
 
-    const subNavElem = document.getElementById('grw-contextual-sub-nav');
-    if (subNavElem) {
-      setSubNavElemWidth(subNavElem.offsetWidth);
-    }
-  }, []);
+  // const subNavElem = document.getElementById('grw-contextual-sub-nav');
+  // if (subNavElem) {
+  //   setSubNavElemWidth(subNavElem.offsetWidth);
+  // }
+  }, [currentPage]);
+
+  // useEffect(() => { setRerenderTest(rerenderTest + 1) }, [currentPage]);
+
+  const linkElem = document.getElementById('grw-page-path-hierarchical-link');
+  const areaElem = document.getElementById('grw-page-path-header-container');
+
+  const linkElemWidth = linkElem?.offsetWidth ?? 0;
+  const areaElemWidth = areaElem?.offsetWidth ?? 0;
+
+  // const linkElemWidth = useMemo(() => (linkElem?.offsetWidth ?? 0), [linkElem?.offsetWidth, currentPage]);
+  // const areaElemWidth = useMemo(() => (areaElem?.offsetWidth ?? 0), [areaElem?.offsetWidth, currentPage]);
+
+  console.log(linkElemWidth);
+  console.log(areaElemWidth);
+
+  // const isIconHidden = linkElemWidth > areaElemWidth;
+
+  console.log(isIconHidden);
+
+
+  const subNavElem = document.getElementById('grw-contextual-sub-nav');
+
+  const subNavElemWidth = useMemo(() => (subNavElem?.offsetWidth ?? 0), []);
+
+  console.log(subNavElemWidth);
 
   const styles: CSSProperties | undefined = isIconHidden ? { direction: 'rtl' } : undefined;
 
@@ -118,7 +145,7 @@ export const PagePathHeader: FC<Props> = (props) => {
   return (
     <div
       id="page-path-header"
-      className={`d-flex ${moduleClass} small`}
+      className={`d-flex ${moduleClass} small position-relative`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       style={{ width: pagePathHeaderWidth }}
@@ -129,7 +156,7 @@ export const PagePathHeader: FC<Props> = (props) => {
         style={{ minWidth: 0 }}
       >
         { isRenameInputShown && (
-          <div className="position-absolute">
+          <div className="position-absolute w-100">
             <ClosableTextInput
               value={editingParentPagePath}
               placeholder={t('Input parent page path')}
@@ -173,4 +200,4 @@ export const PagePathHeader: FC<Props> = (props) => {
       {isOpened && <PageSelectModal />}
     </div>
   );
-};
+});