fixed sortable audio grid

src/components/sortable/SortableAudioGrid/index.tsx

@@ -26,16 +26,28 @@ const SortableAudioGrid: FC<SortableAudioGridProps> = ({
   onSortEnd,
   onTitleChange,
 }) => {
-  const renderItem = useCallback<FC<{ item: IFile }>>(
-    ({ item }) => (
-      <AudioPlayer file={item} onDelete={onDelete} isEditing onTitleChange={onTitleChange} />
+  const renderItem = useCallback<FC<{ item: IFile; key?: string | number }>>(
+    ({ item, key }) => (
+      <AudioPlayer
+        file={item}
+        onDelete={onDelete}
+        isEditing
+        onTitleChange={onTitleChange}
+        key={key}
+      />
     ),
-    []
+    [onTitleChange, onDelete]
   );
 
   const renderLocked = useCallback<FC<{ locked: UploadStatus }>>(
     ({ locked }) => (
-      <AudioUpload id={locked.id} is_uploading title={locked.name} progress={locked.progress} />
+      <AudioUpload
+        id={locked.id}
+        is_uploading
+        title={locked.name}
+        progress={locked.progress}
+        key={locked.id}
+      />
     ),
     []
   );

src/components/sortable/SortableGrid/index.tsx

@@ -1,16 +1,16 @@
-import React, { createElement, FC, useMemo } from "react";
+import React, { createElement, FC, useMemo } from 'react';
 
-import { closestCenter, DndContext, DragOverlay } from "@dnd-kit/core";
-import { rectSortingStrategy, SortableContext } from "@dnd-kit/sortable";
-import classNames from "classnames";
+import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
+import { rectSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+import classNames from 'classnames';
 
-import { DragOverlayItem } from "~/components/sortable/DragOverlayItem";
-import { useSortableActions } from "~/hooks/sortable";
-import { DivProps } from "~/utils/types";
+import { DragOverlayItem } from '~/components/sortable/DragOverlayItem';
+import { useSortableActions } from '~/hooks/sortable';
+import { DivProps } from '~/utils/types';
 
-import { SortableItem } from "../SortableItem";
+import { SortableItem } from '../SortableItem';
 
-import styles from "./styles.module.scss";
+import styles from './styles.module.scss';
 
 interface SortableGridProps<T extends {}, R extends {}> {
   items: T[];

src/components/sortable/SortableList/index.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, FC } from 'react';
+import React, { createElement, FC, memo } from 'react';
 
 import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
@@ -21,56 +21,60 @@ interface SortableListProps<T extends {}, R extends {}> {
   className?: string;
 }
 
-const SortableList = <T, R>({
-  items,
-  locked,
-  getID,
-  getLockedID,
-  className,
-  renderItem,
-  renderLocked,
-  onSortEnd,
-}: SortableListProps<T, R>) => {
-  const { sensors, onDragEnd, onDragStart, draggingItem, ids } = useSortableActions(
+const SortableList = memo(
+  <T, R>({
     items,
+    locked,
     getID,
-    onSortEnd
-  );
+    getLockedID,
+    className,
+    renderItem,
+    renderLocked,
+    onSortEnd,
+  }: SortableListProps<T, R>) => {
+    const { sensors, onDragEnd, onDragStart, draggingItem, ids } = useSortableActions(
+      items,
+      getID,
+      onSortEnd
+    );
 
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragEnd={onDragEnd}
-      onDragStart={onDragStart}
-    >
-      <SortableContext items={ids} strategy={verticalListSortingStrategy}>
-        <div className={classNames(styles.grid, className)}>
-          {items.map(item => (
-            <SortableItem
-              key={getID(item)}
-              id={getID(item)}
-              className={
-                draggingItem && getID(item) === getID(draggingItem) ? styles.dragging : undefined
-              }
-            >
-              {createElement(renderItem, { item })}
-            </SortableItem>
-          ))}
+    return (
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
+      >
+        <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+          <div className={classNames(styles.grid, className)}>
+            {items.map(item => (
+              <SortableItem
+                key={getID(item)}
+                id={getID(item)}
+                className={
+                  draggingItem && getID(item) === getID(draggingItem) ? styles.dragging : undefined
+                }
+              >
+                {createElement(renderItem, { item, key: getID(item) })}
+              </SortableItem>
+            ))}
 
-          {locked.map(item =>
-            createElement(renderLocked, { locked: item, key: getLockedID(item) })
-          )}
+            {locked.map(item =>
+              createElement(renderLocked, { locked: item, key: getLockedID(item) })
+            )}
 
-          <DragOverlay>
-            {draggingItem ? (
-              <DragOverlayItem>{createElement(renderItem, { item: draggingItem })}</DragOverlayItem>
-            ) : null}
-          </DragOverlay>
-        </div>
-      </SortableContext>
-    </DndContext>
-  );
-};
+            <DragOverlay>
+              {draggingItem ? (
+                <DragOverlayItem>
+                  {createElement(renderItem, { item: draggingItem })}
+                </DragOverlayItem>
+              ) : null}
+            </DragOverlay>
+          </div>
+        </SortableContext>
+      </DndContext>
+    );
+  }
+);
 
 export { SortableList };