feat: optimization of render during dnd

src/app/deals/components/DealContainer/DealContainer.tsx

@@ -0,0 +1,21 @@
+import React, { FC, useMemo } from "react";
+import { Box } from "@mantine/core";
+import DealCard from "@/app/deals/components/DealCard/DealCard";
+import { SortableItem } from "@/components/SortableDnd/SortableItem";
+import { DealSchema } from "@/types/DealSchema";
+
+type Props = {
+    deal: DealSchema;
+};
+
+const DealContainer: FC<Props> = ({ deal }) => {
+    const dealBody = useMemo(() => <DealCard deal={deal} />, [deal]);
+
+    return (
+        <Box>
+            <SortableItem id={deal.id}>{dealBody}</SortableItem>
+        </Box>
+    );
+};
+
+export default DealContainer;

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 DealContainer from "@/app/deals/components/DealContainer/DealContainer";
-import { SortableItem } from "@/components/SortableDnd/SortableItem";
 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
+            {columnBody}
-                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>
         </Box>
     );
 };

src/app/deals/components/StatusColumns/StatusColumns.tsx

@@ -19,7 +19,14 @@ const StatusColumns = () => {
         );
     };
 
-    return <StatusColumnsDnd onDealDragEnd={onDealDragEnd} />;
+    const onStatusDragEnd = (statusId: number, lexorank: string) => {};
+
+    return (
+        <StatusColumnsDnd
+            onDealDragEnd={onDealDragEnd}
+            onStatusDragEnd={onStatusDragEnd}
+        />
+    );
 };
 
 export default StatusColumns;

src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx

@@ -11,6 +11,7 @@ import {
     KeyboardSensor,
     Over,
     PointerSensor,
+    TouchSensor,
     useSensor,
     useSensors,
 } from "@dnd-kit/core";
@@ -36,25 +37,36 @@ type Props = {
         statusId: number,
         lexorank?: string
     ) => void;
-    onStatusDragEnd?: (statusId: number, newRank: string) => void;
+    onStatusDragEnd: (statusId: number, lexorank: string) => void;
 };
 
 const StatusColumnsDnd: FC<Props> = props => {
     const { statuses, deals, setDeals, setStatuses } = useStatusesContext();
     const [activeDeal, setActiveDeal] = useState<DealSchema | null>(null);
     const [activeStatus, setActiveStatus] = useState<StatusSchema | null>(null);
-
     const sortedStatuses = useMemo(() => sortByLexorank(statuses), [statuses]);
+
+    const throttledSetStatuses = useMemo(
+        () => throttle(setStatuses, 200),
+        [setStatuses]
+    );
     const throttledSetDeals = useMemo(
         () => throttle(setDeals, 200),
         [setDeals]
     );
 
+    const sensorOptions = {
+        activationConstraint: {
+            distance: 5,
+        },
+    };
+
     const sensors = useSensors(
-        useSensor(PointerSensor),
+        useSensor(PointerSensor, sensorOptions),
         useSensor(KeyboardSensor, {
             coordinateGetter: sortableKeyboardCoordinates,
-        })
+        }),
+        useSensor(TouchSensor, sensorOptions)
     );
 
     const handleDragStart = ({ active }: DragStartEvent) => {
@@ -131,7 +143,7 @@ const StatusColumnsDnd: FC<Props> = props => {
         const newRank = getNewStatusRank(activeStatusId, overStatusId);
         if (!newRank) return;
 
-        setStatuses(statuses =>
+        throttledSetStatuses(statuses =>
             statuses.map(status =>
                 status.id === activeStatusId
                     ? { ...status, rank: newRank }
@@ -317,10 +329,8 @@ const StatusColumnsDnd: FC<Props> = props => {
                                 id={`${status.id}-status`}>
                                 <StatusColumn
                                     id={`${status.id}-status`}
-                                    title={status.name}
+                                    status={status}
-                                    deals={deals.filter(
+                                    deals={deals}
-                                        deal => deal.statusId === status.id
-                                    )}
                                     isDragging={activeStatus?.id === status.id}
                                 />
                             </SortableItem>
@@ -332,7 +342,7 @@ const StatusColumnsDnd: FC<Props> = props => {
                                 ) : activeStatus ? (
                                     <StatusColumn
                                         id={`${activeStatus.id}-status`}
-                                        title={activeStatus.name}
+                                        status={activeStatus}
                                         deals={deals.filter(
                                             deal =>
                                                 deal.statusId ===