react/no-direct-mutation-state
Disallow mutating this.state directly in class components — use setState so React schedules a re-render.
- Category: Correctness
- Severity: error
- Source:
oxlint-builtin:react - Framework: global
- Enabled when: always (unless customRulesOnly=true)
- Documentation: https://oxc.rs/docs/guide/usage/linter/rules/react/no-direct-mutation-state.html
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Fires on this.state.foo = value (or this.state = value outside the constructor) inside React class components — subclasses of React.Component / Component / PureComponent, or createReactClass factories. The mutation bypasses React's scheduler, so a subsequent setState() can silently overwrite it and no re-render is queued. False positive (non-trigger): constructor assignments (this.state = { foo: 'bar' } inside the constructor) are intentionally allowed.
Fix prompt
Use this once validation confirms the diagnostic is real.
Replace mutations with this.setState({ foo: nextValue }), or the updater form this.setState(prev => ({ foo: derive(prev.foo) })) when the next value depends on the previous one. Initialize defaults only in the constructor or via a class field (state = { foo: 'bar' }). Better, port the class to a function component with useState. See https://oxc.rs/docs/guide/usage/linter/rules/react/no-direct-mutation-state.html and https://react.dev/reference/react/Component#setstate
Related rules
More Correctness rules from the rules reference:
react/no-is-mounted: Disallow the removed legacy isMounted() API — cancel async work instead of guarding setState.react/no-render-return-value: Disallow using the return value of ReactDOM.render — a legacy escape hatch removed in React 19.react/no-string-refs: Disallow legacy string refs like ref='node' — use createRef, useRef, or callback refs.react/no-unknown-property: Disallow unknown or mis-cased DOM attributes in JSX, like class instead of className.react/require-render-return: Require class component render() methods to return a value — a missing return renders nothing.