fix: prevent resize drift caused by stale props between renders

Merged
WH
6mo ago
+6-2

Problem

When dragging a resize handle quickly, the element resizes progressively slower than the mouse cursor. The further you drag, the bigger the offset becomes.

Root Cause

In resizeHandler, the new size is computed as:

let width = this.props.width + deltaX / this.props.transformScale;

this.props.width depends on the parent re-rendering with updated props. When React can't re-render between consecutive mousemove events (common during fast dragging), multiple events share the same stale props.width:

Render #1: props.width = 200
  mousemove A: delta=3 → width = 200+3 = 203 → callback(203)
  mousemove B: delta=2 → width = 200+2 = 202 → callback(202)  ← overwrites 203
Render #2: props.width = 202 (3px delta from event A is lost)

This issue was already recognized for onResizeStop in #250 / a09f782, which introduced this.lastSize to avoid stale props. However the same stale-props problem also affects onResize during the drag.

Fix

Use this.lastSize (already tracked) as the base for delta calculation during onResize, falling back to this.props for the first event when lastSize is not yet set:

const baseWidth = this.lastSize?.width ?? this.props.width;
let width = baseWidth + (canDragX ? deltaX / this.props.transformScale : 0);

This is a 2-line change that extends the existing lastSize mechanism to cover the full resize lifecycle, not just the stop event.

Summary by CodeRabbit

  • Bug Fixes
    • Enhanced resize accuracy and responsiveness during continuous dragging operations. The resizable component now more effectively tracks size changes across consecutive drag events, eliminating movement data loss and stuttering. Users will experience noticeably smoother and more consistent resizing behavior, particularly during rapid or sustained resize interactions.