search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.32k stars 2.55k forks source link

Re-render/flicker after dropping a draggable #2303

Closed GNDF5000 closed 3 years ago

GNDF5000 commented 3 years ago

Problem / Expected behavior

I have a classic kanban-board type of app which just needs basic drag and drop functionality. Everything works but after dropping a task(draggable) tasks re-render with old order before updating with the actual new order from the parent component.

Actual behavior

https://user-images.githubusercontent.com/5756352/131696464-075df132-03d7-4d62-9c66-dc4b5fbfdbe9.mp4

Steps to reproduce

project is structured like this:

Parent component which gets data from redux store and passes data to columns which then pass data to tasks

Project (data from redux store) -> BoardView (DragDropContext) -> BoardColumn (Droppable) -> Task (Draggable)

Suggested solution?

It seems like the problem is the BoardColumn component which passes data to tasks. Once the draggable is dropped provided props change which causes the rerender with old order and after 10ms the main component rerenders and passes new props with the correct order.

What version of React are you using?

"react": "^17.0.2",

What version of react-beautiful-dnd are you running?

"react-beautiful-dnd": "^13.1.0",

What browser are you using?

Chrome - Version 92.0.4515.159 (Official Build) (64-bit)

Demo

https://user-images.githubusercontent.com/5756352/131702321-6239fecc-2f13-453d-8fae-4ac2b28e63dd.mp4

GNDF5000 commented 3 years ago

Solved it for now by combining BoardView (DragDropContext) & BoardColumn (Droppable) into one component

huanghaiyang commented 2 years ago

Solved it for now by combining BoardView (DragDropContext) & BoardColumn (Droppable) into one component

I have same problem , do you have the code

Sundvallen commented 2 years ago

@GNDF5000 Did you find a better fix?

KatFishSnake commented 2 years ago

Hmm started to have this issue after upgrading to react 18, if anyone else has an issue like that, message here, please so we can debug as a community 🙏

okkjoo commented 2 years ago

Hmm started to have this issue after upgrading to react 18, if anyone else has an issue like that, message here, please so we can debug as a community 🙏

I have the same problem At the end of the drag,It flashed to another position, and then returned to its rightful position

GIF

R-Bower commented 1 year ago

Also seeing this on React v18.2.0 and NextJS 12.3.1

huanghaiyang commented 1 year ago

use global data to sync state, like window._globalListData = state

and render list with window._globalData

abereghici commented 10 months ago

I created an yarn patch with the following changes https://github.com/hello-pangea/dnd/pull/322/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519 which fixed the issue.