Skip to content

perf(react-resize-handle): avoid detached-wrapper updates - #688

Open
andreivms wants to merge 1 commit into
microsoft:mainfrom
andreivms:fix/687-skip-wrapper-detach-updates
Open

andreivms wants to merge 1 commit into
microsoft:mainfrom
andreivms:fix/687-skip-wrapper-detach-updates

Conversation

@andreivms

Copy link
Copy Markdown

Previous Behavior

useResizeHandle recomputed handle attributes whenever its wrapper ref callback ran, including setWrapperRef(null) during React's deletion commit. In relative mode this read the resized element's getBoundingClientRect() and rewrote attributes on a handle that was being removed. Absolute mode still ran the value-text formatter and attribute writes.

Implicated stacks during unresponsive renderer

DEFAULT_GET_A11_VALUE_TEXT - /node_modules/@fluentui-contrib/react-resize-handle/lib/hooks/useResizeHandle.js
getA11ValueText - /node_modules/@fluentui-contrib/react-resize-handle/lib/hooks/useResizeHandle.js
updateElementsAttrs - /node_modules/@fluentui-contrib/react-resize-handle/lib/hooks/useResizeHandle.js
ref - /node_modules/react-dom/cjs/react-dom.production.min.js
safelyDetachRef - /node_modules/react-dom/cjs/react-dom.production.min.js
commitDeletionEffectsOnFiber - /node_modules/react-dom/cjs/react-dom.production.min.js
recursivelyTraverseDeletionEffects - /node_modules/react-dom/cjs/react-dom.production.min.js
commitDeletionEffectsOnFiber - /node_modules/react-dom/cjs/react-dom.production.min.js
recursivelyTraverseDeletionEffects - /node_modules/react-dom/cjs/react-dom.production.min.js
commitDeletionEffectsOnFiber - /node_modules/react-dom/cjs/react-dom.production.min.js
DEFAULT_GET_A11_VALUE_TEXT - /node_modules/@fluentui-contrib/react-resize-handle/lib/hooks/useResizeHandle.js
getA11ValueText - /node_modules/@fluentui-contrib/react-resize-handle/lib/hooks/useResizeHandle.js
updateElementsAttrs - /node_modules/@fluentui-contrib/react-resize-handle/lib/hooks/useResizeHandle.js
ref - /node_modules/@fluentui/react-utilities/lib/hooks/useMergedRefs.js
ref - /node_modules/react-dom/cjs/react-dom.production.min.js
safelyDetachRef - /node_modules/react-dom/cjs/react-dom.production.min.js
commitDeletionEffectsOnFiber - /node_modules/react-dom/cjs/react-dom.production.min.js
recursivelyTraverseDeletionEffects - /node_modules/react-dom/cjs/react-dom.production.min.js
commitDeletionEffectsOnFiber - /node_modules/react-dom/cjs/react-dom.production.min.js
recursivelyTraverseDeletionEffects - /node_modules/react-dom/cjs/react-dom.production.min.js

These exact frames identify attribute work from a deletion-time ref detach, not whether relative mode or dirty layout was present, how many handles were removed, or the task's duration.

New Behavior

Keep clearing wrapperRef on detach, but update handle attributes only when a wrapper node attaches. The attributes do not depend on the wrapper node. Attachment, reattachment, normal value updates, keyboard and drag behavior remain unchanged; no public type or dependency changes are introduced.

Unit and real-browser regressions cover the detach and positive attachment/update paths. During unmount, Chromium and Firefox component fixtures measure relative-mode element reads 1 -> 0 and handle writes 4 -> 0; absolute-mode reads remain 0 and writes become 3 -> 0.

Avoiding a measurement only avoids a layout when the deletion commit had invalidated layout. This removes redundant work on a retiring handle, not a claim that every detach forced layout or that production renderer duration improved.

Related Issue(s)

Fixes microsoft#687

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 37912007-07c2-40e4-81bd-df708aa99fe2

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug](react-resize-handle): Wrapper ref detach measures and rewrites a retiring handle

2 participants