Add a rule to require $ReadOnly Props and State for React components

[kangax]

It's a good practice to annotate React' Props/State types as $ReadOnly, preventing mutation.

Props can not be mutated in React and doing so could lead to unexpected behavior. State can be mutated but is recommended against, since it's not safe with multiple consecutive calls. There's a lint rule to catch the latter but it's very rudimental and doesn't handle all cases.

type Props = $ReadOnly<{|…|}>
type State = $ReadOnly<{|…|}>

class Foo extends Component<Props, State> { ... }

I don't know if adding React-specific rules is OK in this plugin, but I wanted to throw this idea before making a custom lint rule in our codebase.

[gajus]

I think given that there is a big overlap between the React and Flow user-base, this is a reasonable request. Perhaps it is a better fit for https://github.com/yannickcr/eslint-plugin-react though?

[kangax]

@gajus I guess it could also be in eslint-plugin-react. It doesn't have any Flow-related rules at the moment and eslint-plugin-flowtype doesn't have any React-related rules at the moment :)

I'll probably just make a PR here.

[gajus]

🎉 This issue has been resolved in version 3.9.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀