I'm using this awesome react-beautiful-dnd library to let users reorder a list of items by "drag and drop". It works just fine. The only problem I've encountered is about when a user removes one of the items in the list. It seems that the "Draggable" component doesn't cleanup itself after getting unmounted:
const [items, setItems] = useState(initialItems);
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable">
{(provided) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
>
{items.map((item, index) => {
return (
<Draggable
key={item.id}
draggableId={item.id.toString()}
index={index}
>
{(provided) => (
<div
{...provided.dragHandleProps}
{...provided.draggableProps}
ref={provided.innerRef}
>
<DraggableItem
item={item}
setItems={setItems}
/>
</div>
)}
</Draggable>
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
As you can see, "setItems" is passed to "DraggableItem" component so that it can update state after removing an item.
It correctly updates state and everything is just fine but I get this "Warning" on my browsers console:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
How am I supposed to cleanup after updating items by calling "setItems"?
