frontend-collective / frontend-collective/react-sortable-tree
[Question] How can I bundle onMoveNode events into a transaction when moving between 2 trees
- Dominant language
- JavaScript
- Stars
- 5k
- Forks
- 914
- PR merge metrics
- No merged PRs in 30d
Description
I am rendering a very expensive component based on the contents of multiple trees.
When the user is dragging a node between the 2 trees,
I want to re-render the expensive component only once.
Currently, 2 `onMoveNode` events are fired:
1. add the dragged node to the target tree
2. remove the dragged node from the origin tree
(The user may also decide to move a node within the same tree. Then only 1 `onMoveNode` event is fired.)
When the 1st event fires, then I cannot decide whether or not to wait for a 2nd `onMoveNode` event, because `.treeData` provided by the event contains the target tree, but not the source tree.
As a solution, I am considering writing a scheduler which buffers `onMoveNode` events, and scans through all trees to identify which tree that node came from. If origin tree and `.treeData` do not match, I withhold updating my expensive component, until a 2nd `onMoveNode` event arrives.
This feels somewhat contrived though.
What is a more elegant way to find out if an `onMoveNode`event belongs to a transaction?
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the onMoveNode callback and the treeData supplied for each event. Reproduce a drag between two trees and compare it with a move within one tree, then determine whether the event API exposes transaction boundaries or origin-tree information. Done would require an agreed, documented way to identify or batch the related events.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100