Eslint-plugin-react: react/static-property-placement missed cases

[kimihiro64]

On latest version 7.14.2, I typically leave Component.propTypes = {}; and Component.defaultProps = {}; in my new components from stub file, in case I'm going to expand them letter to have props. The react/static-property-placement is triggering with rules 'react/static-property-placement': ['error', 'static public field'], on two of my components, App and BaseComponent. It gives the errors:

36:1 error 'propTypes' should be declared as a static class property react/static-property-placement
40:1 error 'defaultProps' should be declared as a static class property react/static-property-placement

Not sure why it wants me to make these into static class properties instead of:

App.propTypes = {

};

App.defaultProps = {

};

I have another component which does not trigger it:

DrawerContentComponent.propTypes = {

};

DrawerContentComponent.defaultProps = {

};

Exactly the same layout and everything :/ Is it because other components inherit from BaseComponent? Nothing inherits from App, but maybe it's just special?

EDIT: After carefully reading the doc page again, I see I have chosen the wrong type, I should be using property assignment. However it doesn't explain why the rest of my components which are all using MyComponent.defaultProps outside of the class body don't trigger the same rule, leading to my confusion.

EDIT 2: It appears that any components which extend from a custom component (in my case BaseComponent) will /not/ trigger the error on 'static public field' when doing a property assignment outside class body, while components extending from Component will. I guess component detecting doesn't pick up on subclasses of Component, which renders this rule fairly useless for me since 99% inherit :/

[ljharb]

React class components should never inherit from anything but React.Component - there shouldn't be a "base component" at all.

[kimihiro64]

If you're saying /never/ to something that is technically supported by the
docs....... Any ES6 class....... Doesn't really matter what I have to say.

On Tue, Jul 16, 2019, 12:51 AM Jordan Harband [e-mail]
wrote:

React class components should never inherit from anything but
React.Component - there shouldn't be a "base component" at all.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/yannickcr/eslint-plugin-react/issues/2348?email_source=notifications&email_token=AE3C6UZFKZQ4HYXFYR4DC3DP7VOWNA5CNFSM4ID3O5I2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ7YXOQ#issuecomment-511675322,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE3C6U5VFIBCK5TN6ETPUELP7VOWNANCNFSM4ID3O5IQ
.

[jwhiddent3]

There are plenty of legitimate reasons that BaseComponent is a thing. There might be better ways for that functionality to trickle down, but I mean... It's kind of the Hallmark of functionality between shared components...

[ljharb]

Not in React - it's highly unidiomatic to have inheritance trees. Composition is better than inheritance - this is the official recommendation of the React team.

That said, this linting plugin can be told to treat a class as if it were a React component, even though it's not inheriting directly from React.Component or React.PureComponent: https://github.com/yannickcr/eslint-plugin-react/issues/717#issuecomment-257731857

[kimihiro64]

Closing after workaround.