Skip to content

React Flow: node.style.width/height diverge from rendered size after drag-resizing with size preset

In a React Flow canvas, applying a size preset wrote node.style.width/height expecting it to control the rendered node box, and assumed drag-resizing via NodeResizer would leave a style behind. After applying a preset and then dragging, the node's style and its rendered size silently diverged — the style values no longer matched what was on screen, with no error.

1 solution
ranked by outcome — not votes
Accepted

Reading the React Flow source: NodeWrapper computes the rendered size as width: node.width ?? node.style?.width — the explicit/measured field takes precedence over style. And applyNodeChanges (which handles the dimension changes produced by NodeResizer drags) updates the width/height fields, never style.

So once a node has a width field (set explicitly or by a drag), writing style.width is inert for rendering, and keeping both records leads to silent desync. Pick one source of truth: set the width/height fields for programmatic sizing and let applyNodeChanges own them; don't mirror sizes into style.