After upgrading to React 19, I observed a significant performance regression during the commit phase. The slowdown occurs specifically when a render touches <input> elements.
The new updateInput logic in React 19 does not check whether the DOM actually needs to be updated. Instead of skipping unchanged inputs, it unconditionally applies property writes on every commit — even when the values have not changed.
On pages with a large number of <input> elements, this causes unnecessary DOM mutations that make updates significantly slower compared to React 18.
The problematic lines appear to be:
|
if ( |
|
name != null && |
|
typeof name !== 'function' && |
|
typeof name !== 'symbol' && |
|
typeof name !== 'boolean' |
|
) { |
|
if (__DEV__) { |
|
checkAttributeStringCoercion(name, 'name'); |
|
} |
|
node.name = toString(getToStringValue(name)); |
|
} else { |
|
node.removeAttribute('name'); |
|
} |
|
} |
|
|
React version: 19.2.4
Steps To Reproduce
- Render a component containing a large number of <input> elements (e.g., 500+).
- Trigger a state update that changes the props of only one input.
Link to code example:
react 18 example: https://codesandbox.io/p/sandbox/dry-voice-g7ytpy
react 19 example: https://codesandbox.io/p/sandbox/dazzling-mirzakhani-5sdc8f
The current behavior
The update is significantly slower than in React 18.
React writes to the DOM for every <input> element, even those whose values have not changed.
The expected behavior
The update completes quickly.
React only writes to the DOM for the single input whose value actually changed.
After upgrading to React 19, I observed a significant performance regression during the commit phase. The slowdown occurs specifically when a render touches <input> elements.
The new updateInput logic in React 19 does not check whether the DOM actually needs to be updated. Instead of skipping unchanged inputs, it unconditionally applies property writes on every commit — even when the values have not changed.
On pages with a large number of <input> elements, this causes unnecessary DOM mutations that make updates significantly slower compared to React 18.
The problematic lines appear to be:
react/packages/react-dom-bindings/src/client/ReactDOMInput.js
Line 105 in 1b45e24
react/packages/react-dom-bindings/src/client/ReactDOMInput.js
Lines 191 to 205 in 1b45e24
React version: 19.2.4
Steps To Reproduce
Link to code example:
react 18 example: https://codesandbox.io/p/sandbox/dry-voice-g7ytpy
react 19 example: https://codesandbox.io/p/sandbox/dazzling-mirzakhani-5sdc8f
The current behavior
The update is significantly slower than in React 18.
React writes to the DOM for every <input> element, even those whose values have not changed.
The expected behavior
The update completes quickly.
React only writes to the DOM for the single input whose value actually changed.