react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

drag and drop useDrag hook use of useDragModality causes too many rerenders

Open damenking opened this issue 2 years ago โ€ข 6 comments

๐Ÿ› Bug Report

Draggable components using props from useDraggableItem hook rerender 3 times whenever the keyboard/mouse modality changes. This creates long delays when a separate input is clicked into and then typed into when over ~50 draggable items are in the dom.

๐Ÿค” Expected Behavior

Each draggable component would ideally not rerender if there is no presentational change, or at most once if it's really necessary.

๐Ÿ˜ฏ Current Behavior

useDragModality ends up added multiple event listeners to the document which is causing the component to rerender multiple times whenever the user switches from mouse to keyboard, even though there is no visiual change in the component.

๐Ÿ’ Possible Solution

Only watching for modality changes within the container managing the drag collection might be the easiest but not ideal solution.

๐Ÿ”ฆ Context

I have a list of ~120 draggable items and a form above them. Using the form is extremely slow due to the list rerendering so many times. The slowness is not very noticeable when just using the draggable list because you are usually going to be using the mouse or keyboard exclusively, however the text input fields above it cause the issue to manifest frequently.

๐Ÿ’ป Code Sample

https://codesandbox.io/s/dnd-base-cy15o Open the console and observe the number of times "rendering collection item" is logged each time modality is switched.

๐ŸŒ Your Environment

Software Version(s)
react-spectrum 3.14.1
Browser chrome
Operating System osx big sur

๐Ÿงข Your Company/Team

Adobe/Marketo

๐Ÿ•ท Tracking Issue (optional)

damenking avatar Sep 30 '21 21:09 damenking

Discussed in slack, seems to be in a similar vein to the issues we had previously encountered in TableView with https://github.com/adobe/react-spectrum/pull/1875 and https://github.com/adobe/react-spectrum/pull/2059. Would be good if we only rerender the item currently being focused when modality changes?

LFDanLu avatar Sep 30 '21 21:09 LFDanLu

Seems good assuming it doesn't impact other functionality. I imagine that would radically improve the performance

damenking avatar Oct 01 '21 15:10 damenking

@damenking Just curious, have you been able to move over to using ListView now that it supports drag and drop? Hopefully that will allow you to avoid these performance problems until we pick this issue up again.

LFDanLu avatar Mar 08 '23 19:03 LFDanLu

@LFDanLu I am no longer working on this so I have not tried anything since filing this issue

damenking avatar Mar 08 '23 19:03 damenking