Slow performance react-use-gesture and react-spring

Question

Drag examples in the docs such as this one are extremely fast and map very accurately to my finger position. I've tried copying the examples one-to-one but there is a clear lag to catch up with my finger position.

Here is a code sandbox example which has a clear lag when testing on a real device.

Information:

• React Use Gesture version: (I've tried all manner of combinations of versions with no impact but this is the configuration in the codesandbox)

    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0",
    "react-spring": "9.1.2",
    "react-use-gesture": "9.1.3"

• Device: IPhone 12 pro max
• OS: [e.g. iOS14.5.1]
• Browser chrome

function PullRelease() {
  const [{ x }, api] = useSpring(() => ({ x: 0 }));
  const bind = useDrag(({ movement: [mx], down }) =>
    api.start({ x: down ? mx : 0 })
  );
  return (
    <animated.div {...bind()} style={{ padding: 40, background: "gold", x }}>
      Hello World
    </animated.div>
  );
}

Answer 1

I combed through the source code of the examples. The issue was in fact with react-spring, I needed to supply immediate: true while the touch is active.

https://codesandbox.io/s/react-spring-gesture-basic-swipe-immediate-6bje9?file=/src/App.js

function PullRelease() {
  const [{ x }, api] = useSpring(() => ({ x: 0 }));
  const bind = useDrag(({ movement: [mx], down }) =>
    api.start({ x: down ? mx : 0, 
        immediate: down // the key line
    })
  );
  return (
    <animated.div {...bind()} style={{ padding: 40, background: "gold", x }}>
      Hello World
    </animated.div>
  );
}