Performance Optimization for Animations & Gestures

Sixty finger movements caused 60 renders in one version of a draggable box and 0 renders in another. The two versions differ only in where each one stores its position:

const pan = usePanGesture({
  runOnJS: true,
  onUpdate: (event) => setX(event.translationX),
});

const pan = usePanGesture({
  runOnJS: true,
  onUpdate: (event) => x.setValue(event.translationX),
});

That gap is the theme of this lesson