diff --git a/web/src/app/home/layout.tsx b/web/src/app/home/layout.tsx index d84eb6af..01f38657 100644 --- a/web/src/app/home/layout.tsx +++ b/web/src/app/home/layout.tsx @@ -3,7 +3,7 @@ import styles from './layout.module.css'; import HomeSidebar from '@/app/home/components/home-sidebar/HomeSidebar'; import HomeTitleBar from '@/app/home/components/home-titlebar/HomeTitleBar'; -import React, { useState } from 'react'; +import React, { useState, useCallback, useMemo } from 'react'; import { SidebarChildVO } from '@/app/home/components/home-sidebar/HomeSidebarChild'; import { I18nObject } from '@/app/infra/entities/common'; @@ -18,11 +18,15 @@ export default function HomeLayout({ en_US: '', zh_Hans: '', }); - const onSelectedChangeAction = (child: SidebarChildVO) => { + + const onSelectedChangeAction = useCallback((child: SidebarChildVO) => { setTitle(child.name); setSubtitle(child.description); setHelpLink(child.helpLink); - }; + }, []); + + // Memoize the main content area to prevent re-renders when sidebar state changes + const mainContent = useMemo(() => children, [children]); return (