feat: optimization of render during dnd

src/app/deals/components/StatusColumn/StatusColumn.tsx

@@ -5,23 +5,44 @@ import {
     verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { Box, Stack, Text } from "@mantine/core";
-import DealCard from "@/app/deals/components/DealCard/DealCard";
-import { SortableItem } from "@/components/SortableDnd/SortableItem";
+import DealContainer from "@/app/deals/components/DealContainer/DealContainer";
 import { DealSchema } from "@/types/DealSchema";
+import { StatusSchema } from "@/types/StatusSchema";
 import { sortByLexorank } from "@/utils/lexorank";
 
 type BoardSectionProps = {
     id: string;
-    title: string;
+    status: StatusSchema;
     deals: DealSchema[];
     isDragging?: boolean;
 };
 
-const StatusColumn = ({ id, title, deals, isDragging }: BoardSectionProps) => {
+const StatusColumn = ({ id, status, deals, isDragging }: BoardSectionProps) => {
     const { setNodeRef } = useDroppable({ id });
-    const sortedDeals = useMemo(() => sortByLexorank(deals), [deals]);
+    const sortedDeals = useMemo(
+        () => sortByLexorank(deals.filter(deal => deal.statusId === status.id)),
+        [deals]
+    );
 
-    console.log("rerender");
+    const columnBody = useMemo(() => {
+        return (
+            <SortableContext
+                id={id}
+                items={sortedDeals}
+                strategy={verticalListSortingStrategy}>
+                <Stack
+                    gap={"xs"}
+                    ref={setNodeRef}>
+                    {sortedDeals.map(deal => (
+                        <DealContainer
+                            key={deal.id}
+                            deal={deal}
+                        />
+                    ))}
+                </Stack>
+            </SortableContext>
+        );
+    }, [sortedDeals]);
 
     return (
         <Box
@@ -37,24 +58,9 @@ const StatusColumn = ({ id, title, deals, isDragging }: BoardSectionProps) => {
                     userSelect: "none",
                     opacity: isDragging ? 0.5 : 1,
                 }}>
-                {title}
+                {status.name}
             </Text>
-            <SortableContext
-                id={id}
-                items={sortedDeals}
-                strategy={verticalListSortingStrategy}>
-                <Stack
-                    gap={"xs"}
-                    ref={setNodeRef}>
-                    {sortedDeals.map(deal => (
-                        <Box key={deal.id}>
-                            <SortableItem id={deal.id}>
-                                <DealCard deal={deal} />
-                            </SortableItem>
-                        </Box>
-                    ))}
-                </Stack>
-            </SortableContext>
+            {columnBody}
         </Box>
     );
 };