Skip to content

Commit b42f2c7

Browse files
authored
fix: prevent resize drift caused by stale props between renders (#255)
When React can't re-render between consecutive mousemove events, this.props.width is stale and intermediate deltas are lost, causing progressive drift where the element resizes slower than the mouse. Use this.lastSize (already tracked for onResizeStop) as the base for delta calculation during onResize, falling back to props for the first event.
1 parent edc7cbd commit b42f2c7

File tree

1 file changed

+6
-2
lines changed

1 file changed

+6
-2
lines changed

lib/Resizable.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,12 @@ export default class Resizable extends React.Component<Props, void> {
127127
if (axisV === 'n') deltaY = -deltaY;
128128

129129
// Update w/h by the deltas. Also factor in transformScale.
130-
let width = this.props.width + (canDragX ? deltaX / this.props.transformScale : 0);
131-
let height = this.props.height + (canDragY ? deltaY / this.props.transformScale : 0);
130+
// Use lastSize (if available) instead of props to avoid losing deltas
131+
// when React can't re-render between consecutive mouse events.
132+
const baseWidth = this.lastSize?.width ?? this.props.width;
133+
const baseHeight = this.lastSize?.height ?? this.props.height;
134+
let width = baseWidth + (canDragX ? deltaX / this.props.transformScale : 0);
135+
let height = baseHeight + (canDragY ? deltaY / this.props.transformScale : 0);
132136

133137
// Run user-provided constraints.
134138
[width, height] = this.runConstraints(width, height);

0 commit comments

Comments
 (0)