fix: prevent resize drift caused by stale props between renders#255
Merged
STRML merged 1 commit intoreact-grid-layout:masterfrom Feb 28, 2026
Merged
Conversation
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.
Closed
14 tasks
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe change updates resize calculation logic in Resizable.js to use Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Collaborator
|
Thanks much. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:this.props.widthdepends on the parent re-rendering with updated props. When React can't re-render between consecutivemousemoveevents (common during fast dragging), multiple events share the same staleprops.width:This issue was already recognized for
onResizeStopin #250 /a09f782, which introducedthis.lastSizeto avoid stale props. However the same stale-props problem also affectsonResizeduring the drag.Fix
Use
this.lastSize(already tracked) as the base for delta calculation duringonResize, falling back tothis.propsfor the first event whenlastSizeis not yet set:This is a 2-line change that extends the existing
lastSizemechanism to cover the full resize lifecycle, not just the stop event.Summary by CodeRabbit