Draggable components switch between 'controlled' and 'uncontrolled'

The API for draggable components violates react’s controlled vs uncontrolled component paradigm. Any component marked draggable seems to switch between managing its own state and respecting the x, y values that it gets as props.

In my use-case, react-konva is the renderer for a physics-backed layout. When users drag a Rect, there is some elastic feedback, so the Rect shouldn’t be right under the cursor but instead lags behind it by an increasing amount as it is pulled. Since the components switches between the x, y value that it is getting as props (correct, from my physics simulation) and its own x, y state that is is managing since it is draggable, there is a ‘twitching’ effect in the graphics.

Here’s a GIF of the behavior:

As a much more contrived but direct minimal repro, consider this codePen: https://43momq7017.codesandbox.io/

It should be fairly easy to get the twitching effect I described when you drag the Rect as the components switched between controlled and uncontrolled.

[lavrton]

I was thinking about this issue. To make a fully controlled component you can do this:

onDragMove={e => {
  const newPos = e.target.position();
  // reset position to its old state
  // so drag is fully controlled by react
  e.target.position({ x: pos.x, y: pos.y });

  // your set state
  setPos({
    x: Math.min(100, newPos.x),
    y: Math.min(100, newPos.y)
  });
}}

The idea is to reset the node position to its original value that we have in the react. And then use new position to set a new state. If you comment setPos the node will be not movable. So it works as a controlled component.

Demo: https://codesandbox.io/s/react-konva-controlled-drag-demo-pxmg8

Probably that little logic in onDragMove can be abstracted into something like react hook.

[seankimdesign]

I’ve noticed this issue as well. Dragged elements seems to maintain an internal state outside of the React paradigm. I think react-konva version 1.7.9 and below actually does not have this problem. It must have been introduced short time after.