-
-
Notifications
You must be signed in to change notification settings - Fork 640
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useSortable re-renders all items even with just clicking one item, affecting performance #1379
Comments
Encountered this but got solved by wrapping whole component in memo() where the second argument is the function that checks if component should rerender. |
For people having similar usage and problem. In addition to using |
I'm facing the same issue @wdire , can you share the final idea of your code, to inspire me? |
@igorbrasileiro in addition to the code I shared above with Going from my example, even though parent of |
@wdire personally I experienced issues with keeping track of items jumping over containers in a kanban layout while testing your debounce recommendation. For example jumping from container column 1 -> container column 3. |
This happens when #1494 should fix this perf bottleneck. |
I noticed a lag while moving a sortable item on mobile when having around 50 sortable items. I've already noticed that when even only clicking a item it does render every other items, idk why. So I moved everything beside
useSortable
toContentCardMemo
that is wrapped withReact.memo
, thatmemo
component doesn't re-render every time and I thought its ok now. I've made sure thatuseSortable
is the one causing all re-renders, the container that maps allContentCard
s is not the one re-rendering.It might have improved with
memo
but I'm having performance issues on mobile with a merely 50 items. First I thought my way of storing/updating items might have causing the issue, storing it in a array of objects, when order changes it recreates whole items witharrayMove
. But considering container not being re-rendered and just touching a sortable item causes total 200 re-renders, the issue is aboutuseSortable
itself.Though on desktop it's not as bad as mobile, it still shows lag, performance issue when the list grows more.
Is there a way to fix this?
Versions:
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/modifiers": "^7.0.0",
"@dnd-kit/sortable": "^8.0.0", // also tried with 7.0.2, same
"@dnd-kit/utilities": "^3.2.2",
Code at issue:
The text was updated successfully, but these errors were encountered: