frontend-collective / frontend-collective/react-sortable-tree

[Question] How can I bundle onMoveNode events into a transaction when moving between 2 trees

Open
#520 1 comment 2 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.