[Compiler Bug]: Modifying a value returned from a hook is not allowed. #34418
Description
What kind of issue is this?
- React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
- babel-plugin-react-compiler (build issue installing or using the Babel plugin)
- eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
- react-compiler-healthcheck (build issue installing or using the healthcheck script)
Link to repro
Repro steps
import { useState } from 'react';
import { useAppDispatch } from '../../store/hooks';
import { slice } from '../../store/slice';
export default function Files() {
const dispatch = useAppDispatch();
const [state, setState] = useState(0);
return (
<div>
<input
type="file"
onChange={(event) => {
if (event.target.files?.length) {
dispatch(slice.actions.setFileToUpload([...event.target.files]));
// if uncommented this line, no compiler errors
// setState((s) => s + [...event.target.files].length);
event.target.value = '';
}
}}
multiple
/>
</div>
);
}Found 1 error:
Error: This value cannot be modified
Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed.
16 | // if uncommented this line, no compiler errors
17 | // setState((s) => s + [...event.target.files].length);
> 18 | event.target.value = '';
| ^^^^^^^^^^^^ `dispatch` cannot be modified
19 | }
20 | }}
21 | multiple
How often does this bug happen?
Every time
What version of React are you using?
19.1.1
What version of React Compiler are you using?
19.1.0-rc.3