Fix unnecessary DOM mutations in updateInput for unchanged inputs (#36229)#36240
Fix unnecessary DOM mutations in updateInput for unchanged inputs (#36229)#36240aryashashank wants to merge 1 commit intofacebook:mainfrom
Conversation
|
Hi @aryashashank! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
Summary
Fixes #36229
React 19 introduced a performance regression in
updateInput()(ReactDOMInput.js). On every commit, the function unconditionally performs three DOM mutations for every<input>element — even when none of the input-specific props (type,name,value,checked) have changed:node.name = ''— disconnects the input from its radio groupnode.type = type— rewrites the type propertynode.name = name— restores the name propertyOn pages with many
<input>elements (e.g. 500+), this causes hundreds of unnecessary DOM writes per render, making updates significantly slower than React 18.This PR adds change detection by comparing new values against the current DOM state before writing. The
node.name = ''disconnection trick — which exists to ensure atomicity when changingtypeornamealongsidecheckedfor radio buttons — is now only performed whentypeornameis actually changing. All existing semantics, including radio button group behavior, are preserved.How did you test this change?
Added two new tests to
ReactDOMInput-test.js:"should not perform unnecessary DOM mutations for unchanged inputs" — Renders two inputs under a shared parent, installs an
Object.definePropertysetter trap on the unchanged input'snameproperty, then updates only the first input's value. The test verifies that the second input'snameis never written to."should not write type or name when they have not changed" — Renders an input, installs a setter trap on
typethat counts writes, then re-renders with identical props. The test verifies zero writes totype.Ran the full test suites:
ESLint and Prettier also pass on the changed files.