Eslint-plugin-react: react/no-direct-mutation-state doesn't catch all cases

[yantakus]

  const { model } = this.state;
  model.rating = rate;

In this case eslint won't show any errors.

[jseminck]

I think we figured this out yesterday. Somebody created a PR for not allowing mutation for this.props and added support for this case. Once that PR is finished we'll try to move all the logic over to no-direct-mutation-state rule as well.

https://github.com/yannickcr/eslint-plugin-react/pull/1416

[meldafert]

is there any news on this? or alternatives that i could use?

[kangax]

@meldafert I just found out the other day about this rule not catching all cases. Ended up marking state immutable via Flow instead, which is perfect for this job:

// ...
type State = $ReadOnly<{| ... |}>
class Smth extends Component<Props, State> {
  // ...
}

[meldafert]

@kangax thank you, this is exactly what i needed. (turns out typescript has this too).

[kangax]

@meldafert lint rule pending https://github.com/gajus/eslint-plugin-flowtype/pull/400

[maniator]

@kangax thank you, this is exactly what i needed. (turns out typescript has this too).

@meldafert TypeScript already disallows changing props as they are marked as readonly through typescript typing already (the app will not build if you try to mutate props)

[meldafert]

@meldafert TypeScript already disallows changing props as they are marked as readonly through typescript typing already (the app will not build if you try to mutate props)

@maniator True, but only for mutating this.props itself, but not for eg. this.props.list.push(), which is what i'm trying to catch.
(if i declare the prop as list: Readonly<Item[]>, it does prevent me from using push())

[maniator]

@meldafert ahh, so it does not do a _deap_ check.

You can probably also do (in ts)

```typescript
readonly list: Item[],