fix: memoize components and improve performance (#579)

components/sidebar-history.tsx

@@ -4,7 +4,7 @@ import { isToday, isYesterday, subMonths, subWeeks } from 'date-fns';
 import Link from 'next/link';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import type { User } from 'next-auth';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import useSWR from 'swr';
 
@@ -36,6 +36,7 @@ import {
 } from '@/components/ui/sidebar';
 import type { Chat } from '@/lib/db/schema';
 import { fetcher } from '@/lib/utils';
+import equal from 'fast-deep-equal';
 
 type GroupedChats = {
   today: Chat[];
@@ -45,7 +46,7 @@ type GroupedChats = {
   older: Chat[];
 };
 
-const ChatItem = ({
+const PureChatItem = ({
   chat,
   isActive,
   onDelete,
@@ -62,6 +63,7 @@ const ChatItem = ({
         <span>{chat.title}</span>
       </Link>
     </SidebarMenuButton>
+
     <DropdownMenu modal={true}>
       <DropdownMenuTrigger asChild>
         <SidebarMenuAction
@@ -85,6 +87,11 @@ const ChatItem = ({
   </SidebarMenuItem>
 );
 
+export const ChatItem = memo(PureChatItem, (prevProps, nextProps) => {
+  if (prevProps.isActive !== nextProps.isActive) return false;
+  return true;
+});
+
 export function SidebarHistory({ user }: { user: User | undefined }) {
   const { setOpenMobile } = useSidebar();
   const { id } = useParams();