From 69f9887dae6c902141093ef627e104e0fbc9b793 Mon Sep 17 00:00:00 2001 From: "yuanrang.peng" Date: Tue, 27 Feb 2024 18:17:21 +0800 Subject: [PATCH 1/3] fix: Resolve the hydration issue arising from the useMemo. --- src/app/components/MobileTopNav.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/components/MobileTopNav.tsx b/src/app/components/MobileTopNav.tsx index f14ee1d9..7b7ebbfb 100644 --- a/src/app/components/MobileTopNav.tsx +++ b/src/app/components/MobileTopNav.tsx @@ -1,7 +1,7 @@ import * as Accordion from '@radix-ui/react-accordion' import { assignInlineVars } from '@vanilla-extract/dynamic' import clsx from 'clsx' -import { type ComponentType, useMemo, useState } from 'react' +import { type ComponentType, useMemo, useState, useEffect } from 'react' import { useLocation } from 'react-router-dom' import type * as Config from '../../config.js' @@ -233,6 +233,8 @@ export function Curtain({ const [isOutlineOpen, setOutlineOpen] = useState(false) const [isSidebarOpen, setSidebarOpen] = useState(false) + const [contentTitle, setContentTitle] = useState('') + const sidebarItemTitle = useMemo(() => { if (!sidebar || layout === 'minimal') return const sidebarItem = getSidebarItemFromPathname({ @@ -242,9 +244,9 @@ export function Curtain({ return sidebarItem?.text }, [layout, pathname, sidebar]) - const contentTitle = useMemo(() => { - if (typeof window === 'undefined') return - return document.querySelector('.vocs_Content h1')?.textContent + useEffect(() => { + const title = document.querySelector('.vocs_Content h1')?.textContent || '' + setContentTitle(title) }, []) const title = sidebarItemTitle || frontmatter.title || contentTitle From 0b316ec67fc9798918ca32062b83336938f8b586 Mon Sep 17 00:00:00 2001 From: Fuxiao Peng Date: Tue, 27 Feb 2024 18:24:18 +0800 Subject: [PATCH 2/3] Update MobileTopNav.tsx Avoid unnecessary rendering. --- src/app/components/MobileTopNav.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/components/MobileTopNav.tsx b/src/app/components/MobileTopNav.tsx index 7b7ebbfb..26bde1b1 100644 --- a/src/app/components/MobileTopNav.tsx +++ b/src/app/components/MobileTopNav.tsx @@ -246,7 +246,9 @@ export function Curtain({ useEffect(() => { const title = document.querySelector('.vocs_Content h1')?.textContent || '' - setContentTitle(title) + if(title){ + setContentTitle(title) + } }, []) const title = sidebarItemTitle || frontmatter.title || contentTitle From 6caadd743ef4ce0c4d7014a20ec0106cf734400e Mon Sep 17 00:00:00 2001 From: Fuxiao Peng Date: Tue, 27 Feb 2024 18:26:41 +0800 Subject: [PATCH 3/3] Update MobileTopNav.tsx --- src/app/components/MobileTopNav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/MobileTopNav.tsx b/src/app/components/MobileTopNav.tsx index 26bde1b1..0257a60a 100644 --- a/src/app/components/MobileTopNav.tsx +++ b/src/app/components/MobileTopNav.tsx @@ -246,7 +246,7 @@ export function Curtain({ useEffect(() => { const title = document.querySelector('.vocs_Content h1')?.textContent || '' - if(title){ + if (title) { setContentTitle(title) } }, [])