[React 19] React compiler & eslint plugin giving an error to mutating values in refs that are used in JSX #29703
Comments
adubrouski
changed the title
|
Good catch, this is a bug. We’ll need to add a new FunctionEffect variant for writes to refs, and allow that effect inside JSX and effects. |
|
Thanks @josephsavona. A related issue: If a ref is passed as a prop, the compiler can't tell it's a prop, so the linter warns if the prop is mutated. If you fix the bug above, will the linter allow mutating refs passed as props? |
This one is slightly different, I created another issue to track that separately here: #29741 |
Fixes false positives where we currently disallow mutations of refs from callbacks passed to JSX, if the ref is also passed to jsx. We consider these to be mutations of "frozen" values, but refs are explicitly allowed to have interior mutability. The fix is to add a new RefMutation variant to FunctionEffect, which we emit whenever a ref is mutated. We disallow this effect type from within a function body, but allow it within function expressions that are passed to useEffect and friends as well as to jsx. Fixes #29741 Fixes #29703 [ghstack-poisoned]
Fixes false positives where we currently disallow mutations of refs from callbacks passed to JSX, if the ref is also passed to jsx. We consider these to be mutations of "frozen" values, but refs are explicitly allowed to have interior mutability. The fix is to add a new RefMutation variant to FunctionEffect, which we emit whenever a ref is mutated. We disallow this effect type from within a function body, but allow it within function expressions that are passed to useEffect and friends as well as to jsx. Fixes #29741 Fixes #29703 [ghstack-poisoned]
|
Fixed in #29733 |
|
@josephsavona thanks for fix. Are there any plans to publish a new version of the compiler and ESLint plugin soon? |
|
Yeah we’ll publish again next week |
|
@josephsavona any updates on publishing? |
Summary
eslint-plugin-react-compilerversion:0.0.0-experimental-51a85ea-20240601When I try to mutate a ref value in any event handler, the
eslint-plugin-reactcompiler gives the following error:Linked CodeSandbox:
https://codesandbox.io/p/sandbox/kind-mirzakhani-qzw4t3
Linked Compiler Playground:
https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwEFNMAKASn2AAdNvjiswNJpQQBJOpii4ASqXwBefFDAIVJADwAJACoBZADJyFuAKLSAtgjq4AfNzpVKvANzDh+UeIEABZkdITSMnbYeOr4fOrOAn7++EwkcSRSsvKKugB0cLAwjgQAhGoa7pSeSSIp+JkROcqkBUUleQBuZJRQCLGCIIM+dSmN2Vb5hTDFTgWUTHAA1nwj9QC+yesjycW4sGzcyf56zscpekzN+LgAnpgIakIg44Pr+MUkT+OWuaTvAHoznRzicAEaKXCsfCsADCC2WTxCYQiURwuHWzki0VwegBENwULowPqeJJ+G8wk2dBA6yAA
This seems a bit off to me because the documentation specifically mentions manipulating the DOM with a ref as an accepted pattern:
https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref
@josephsavona made a fix for issue like this, but this fix allow only global mutations like
windowordocument. Refs mutations also cause an error in eslint-plugin-react-compilerThe text was updated successfully, but these errors were encountered: