Performance: Stop unnecessary Sidebar re-renders during chat responses

I noticed the Sidebar was re-rendering on every single text chunk from the LLM. This was making the UI feel a bit sluggish and was spamming the console, which made debugging a pain.

A cascade of unnecessary re-renders occurred because parent components were creating 'new' functions for props like onClose and clearChat on every render.

Here's how I approached the issue:

1. Added React.memo to Sidebar.tsx, enabling it to ignore prop changes that aren't actually different.

2. Stabilized the parents Layout.tsx and Chat\Header.tsx by wrapping the functions being passed down ('onClose', etc.) in 'useCallback'; stopping them from being treated as 'new' on every render.

3. Updated the custom hooks, useMessage and useMessageOption, wrapping all of their returned functions in useCallback or useMemo; ensuring they too provide stable/consistent functions to any components that use them.

After these changes the Sidebar should only update when it actually needs to, making the app feel a bit faster and the console much cleaner.

Author: underhill-gb

src/components/Layouts/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useCallback } from "react"
 
 import { Sidebar } from "../Option/Sidebar"
 import { Drawer, Tooltip } from "antd"
@@ -34,11 +34,18 @@ export default function OptionLayout({
     temporaryChat,
     setSelectedSystemPrompt,
     setContextFiles,
-    useOCR
+    useOCR,
+    history // <-- Destructure history here as it's used in the Sidebar props
   } = useMessageOption()
   const queryClient = useQueryClient()
   const { setSystemPrompt } = useStoreChatModelSettings()
 
+  // Create a stable function for onClose using useCallback.
+  // This prevents a new function from being created on every render.
+  const handleCloseSidebar = useCallback(() => {
+    setSidebarOpen(false)
+  }, [])
+
   return (
     <div className="flex h-full w-full">
       <main className="relative h-dvh w-full">
@@ -93,11 +100,11 @@ export default function OptionLayout({
           }
           placement="left"
           closeIcon={null}
-          onClose={() => setSidebarOpen(false)}
+          onClose={handleCloseSidebar}
           open={sidebarOpen}>
           <Sidebar
             isOpen={sidebarOpen}
-            onClose={() => setSidebarOpen(false)}
+            onClose={handleCloseSidebar}
             setMessages={setMessages}
             setHistory={setHistory}
             setHistoryId={setHistoryId}