refactor: Avoid useless re-render on <Header/>

Chainlit · Oct 18, 2023 · 2ff9396 · 2ff9396
1 parent 6e55206
commit 2ff9396
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 49 deletions.
diff --git a/frontend/src/components/organisms/header.tsx b/frontend/src/components/organisms/header.tsx
@@ -1,6 +1,5 @@
-import { useRef, useState } from 'react';
+import { memo, useRef, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 
 import MenuIcon from '@mui/icons-material/Menu';
 import {
@@ -23,7 +22,7 @@ import NewChatButton from 'components/molecules/newChatButton';
 
 import { useAuth } from 'hooks/auth';
 
-import { projectSettingsState } from 'state/project';
+import { IProjectSettings } from 'state/project';
 
 import OpenChatHistoryButton from './conversationsHistory/sidebar/OpenChatHistoryButton';
 
@@ -62,9 +61,10 @@ function NavItem({ to, label }: INavItem) {
 interface NavProps {
   dataPersistence?: boolean;
   hasReadme?: boolean;
+  matches?: boolean;
 }
 
-function Nav({ dataPersistence, hasReadme }: NavProps) {
+const Nav = ({ dataPersistence, hasReadme, matches }: NavProps) => {
   const location = useLocation();
   const { isAuthenticated } = useAuth();
   const [open, setOpen] = useState(false);
@@ -76,15 +76,14 @@ function Nav({ dataPersistence, hasReadme }: NavProps) {
     anchorEl = ref.current;
   }
 
-  const isMobile = useMediaQuery('(max-width: 66rem)');
   const tabs = [{ to: '/', label: 'Chat' }];
 
   if (hasReadme) {
     tabs.push({ to: '/readme', label: 'Readme' });
   }
 
   const nav = (
-    <Stack direction={isMobile ? 'column' : 'row'} spacing={1}>
+    <Stack direction={matches ? 'column' : 'row'} spacing={1}>
       {tabs.map((t) => {
         const active = location.pathname === t.to;
         return (
@@ -96,7 +95,7 @@ function Nav({ dataPersistence, hasReadme }: NavProps) {
     </Stack>
   );
 
-  if (isMobile) {
+  if (matches) {
     return (
       <>
         <IconButton
@@ -140,44 +139,48 @@ function Nav({ dataPersistence, hasReadme }: NavProps) {
   } else {
     return nav;
   }
-}
+};
 
-export default function Header() {
-  const pSettings = useRecoilValue(projectSettingsState);
-  const matches = useMediaQuery('(max-width: 66rem)');
+const Header = memo(
+  ({ projectSettings }: { projectSettings?: IProjectSettings }) => {
+    const matches = useMediaQuery('(max-width: 66rem)');
 
-  return (
-    <AppBar elevation={0} color="transparent" position="static">
-      <Toolbar
-        sx={{
-          padding: (theme) => `0 ${theme.spacing(2)} !important`,
-          minHeight: '60px !important',
-          borderBottomWidth: '1px',
-          borderBottomStyle: 'solid',
-          background: (theme) => theme.palette.background.paper,
-          borderBottomColor: (theme) => theme.palette.divider
-        }}
-      >
-        <Stack alignItems="center" direction={'row'} gap={!matches ? 3 : 1}>
-          {!matches ? <Logo style={{ maxHeight: '25px' }} /> : null}
-          <Nav
-            dataPersistence={pSettings?.dataPersistence}
-            hasReadme={!!pSettings?.markdown}
-          />
-        </Stack>
-        <Stack
-          alignItems="center"
-          sx={{ ml: 'auto' }}
-          direction="row"
-          spacing={1}
-          color="text.primary"
+    return (
+      <AppBar elevation={0} color="transparent" position="static">
+        <Toolbar
+          sx={{
+            padding: (theme) => `0 ${theme.spacing(2)} !important`,
+            minHeight: '60px !important',
+            borderBottomWidth: '1px',
+            borderBottomStyle: 'solid',
+            background: (theme) => theme.palette.background.paper,
+            borderBottomColor: (theme) => theme.palette.divider
+          }}
         >
-          <NewChatButton />
-          <Box ml={1} />
-          <GithubButton href={pSettings?.ui?.github} />
-          <UserButton />
-        </Stack>
-      </Toolbar>
-    </AppBar>
-  );
-}
+          <Stack alignItems="center" direction={'row'} gap={!matches ? 3 : 1}>
+            {!matches ? <Logo style={{ maxHeight: '25px' }} /> : null}
+            <Nav
+              matches={matches}
+              dataPersistence={projectSettings?.dataPersistence}
+              hasReadme={!!projectSettings?.markdown}
+            />
+          </Stack>
+          <Stack
+            alignItems="center"
+            sx={{ ml: 'auto' }}
+            direction="row"
+            spacing={1}
+            color="text.primary"
+          >
+            <NewChatButton />
+            <Box ml={1} />
+            <GithubButton href={projectSettings?.ui?.github} />
+            <UserButton />
+          </Stack>
+        </Toolbar>
+      </AppBar>
+    );
+  }
+);
+
+export { Header };
diff --git a/frontend/src/pages/Env.tsx b/frontend/src/pages/Env.tsx
@@ -8,7 +8,7 @@ import { Alert, Box, Button, Typography } from '@mui/material';
 
 import { TextInput } from '@chainlit/components';
 
-import TopBar from 'components/organisms/header';
+import { Header } from 'components/organisms/header';
 
 import { projectSettingsState } from 'state/project';
 import { userEnvState } from 'state/user';
@@ -73,7 +73,7 @@ export default function Env() {
         flexGrow: 1
       }}
     >
-      <TopBar />
+      <Header />
       <Box
         id="env"
         display="flex"

diff --git a/frontend/src/pages/Page.tsx b/frontend/src/pages/Page.tsx
@@ -5,7 +5,7 @@ import { Alert, Box, Stack } from '@mui/material';
 
 import { ConversationsHistorySidebar } from 'components/organisms/conversationsHistory/sidebar';
 import OpenChatHistoryButton from 'components/organisms/conversationsHistory/sidebar/OpenChatHistoryButton';
-import Header from 'components/organisms/header';
+import { Header } from 'components/organisms/header';
 
 import { useAuth } from 'hooks/auth';
 
@@ -39,7 +39,7 @@ const Page = ({ children }: Props) => {
         width: '100%'
       }}
     >
-      <Header />
+      <Header projectSettings={projectSettings} />
       {!isAuthenticated ? (
         <Alert severity="error">You are not part of this project.</Alert>
       ) : (