Merge pull request #4 from 0x3EF8/bolt/optimize-chat-filtering-14681113663465310253

⚡ Bolt: Memoize message filtering in Chat component

Author: 0x3EF8

.jules/bolt.md

@@ -0,0 +1,3 @@
+## 2024-04-07 - Filtering Performance Optimization in Chat Component
+**Learning:** Extracting inline array filtering (O(N) operations) out of the return statement into a `useMemo` hook reduces UI lag during text entry by preventing re-computation on unrelated state changes (like typing). Early returning the unmodified array when no filter is applied allows child components to bail out of re-rendering.
+**Action:** Always scan for unmemoized O(N) array transformations inside JSX props, especially when the parent component has rapidly changing states like text inputs.

app/components/Chat.tsx

@@ -334,6 +334,15 @@ export default function Chat({ user }: { user: User }) {
       .reverse();
   }, [messages]);
 
+  // Performance optimization: Memoize the filtered messages to avoid O(N) string manipulation on every keystroke
+  // when typing a message (which triggers a re-render of Chat.tsx). This significantly improves typing latency
+  // in conversations with many messages.
+  const filteredMessages = useMemo(() => {
+    if (!messageSearch) return messages;
+    const lowerSearch = messageSearch.toLowerCase();
+    return messages.filter((m) => (m.text || "").toLowerCase().includes(lowerSearch));
+  }, [messages, messageSearch]);
+
   return (
     <>
       <MediaViewerModal
@@ -489,9 +498,7 @@ export default function Chat({ user }: { user: User }) {
 
             <div className="flex-1 flex flex-col overflow-hidden z-10 min-h-0">
               <Messages
-                messages={messages.filter((m) =>
-                  (m.text || "").toLowerCase().includes(messageSearch.toLowerCase())
-                )}
+                messages={filteredMessages}
                 user={user}
                 conversations={conversations}
                 bottomRef={bottomRef}