How to modify data with gestures?

[joshua7v]

Say I have an array of nodes Node[]
and it gets rendered as something like<Node name="" />

Now, I want to add gestures to my node,

// Graph contains Nodes
<View>
{nodes.map(todo => ({
  <Node />
)}}
</View>

// Node
const panGesture = Gesture().begin().update().end()

<GestureDetector gesture={panGesture}>
  <Node name="" />
</GestureDetector>

The thing I'm trying to build looks like this,
on the top, there is a list of nodes that could be dragged into the view below
on the bottom, it is a graph that contains nodes from top
and nodes in the bottom view can also be dragged to reorder.

When I drag a node and release on bottom view,
I modify the nodes array inside onEnd of the pan gesture to add a new node
this will cause a rerender of the whole system, and with a noticeable lag.

Is there a better way to architect this kind of app with react-native-reanimated?

┌────────────────────────────┐
│                            │
│ ┌───┐ ┌───┐ ┌───┐          │
│ │ a │ │ b │ │ c │          │
│ └─┬─┘ └───┘ └───┘          │
│   │                        │
│   │                        │
├───┼────────────────────────┤
├───┼────────────────────────┤
│   │                        │
│ ┌─▼─┐                      │
│ │ a │       ┌───┐          │
│ └───┘       │ a │          │
│             └───┘          │
│                            │
│     ┌───┐   ┌───┐          │
│     │ b │   │ c │          │
│     └───┘   └───┘          │
│                            │
│                            │
│                            │
└────────────────────────────┘