From 87cea5865ae5db64570f29b0dc8a8324101085a0 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Tue, 8 Oct 2024 22:49:29 +0200
Subject: [PATCH] optimize with useMemo

---
 interface/src/components/layout/Layout.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/interface/src/components/layout/Layout.tsx b/interface/src/components/layout/Layout.tsx
index a11d194d4..c02b26f46 100644
--- a/interface/src/components/layout/Layout.tsx
+++ b/interface/src/components/layout/Layout.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { FC } from 'react';
 import { useLocation } from 'react-router-dom';
 
@@ -24,9 +24,11 @@ const Layout: FC<RequiredChildrenProps> = ({ children }) => {
 
   useEffect(() => setMobileOpen(false), [pathname]);
 
+  // cache the object to prevent unnecessary re-renders
+  const obj = useMemo(() => ({ title, setTitle }), [title]);
+
   return (
-    // TODO wrap title/setTitle in a useMemo()
-    <LayoutContext.Provider value={{ title, setTitle }}>
+    <LayoutContext.Provider value={obj}>
       <LayoutAppBar title={title} onToggleDrawer={handleDrawerToggle} />
       <LayoutDrawer mobileOpen={mobileOpen} onClose={handleDrawerToggle} />
       <Box component="main" sx={{ marginLeft: { md: `${DRAWER_WIDTH}px` } }}>