Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(cosmetic) Quote this as this in the no-this-in-sfc rule #2616

Merged
merged 1 commit into from Apr 13, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 2 additions & 3 deletions docs/rules/no-this-in-sfc.md
@@ -1,9 +1,8 @@
# Prevent `this` from being used in stateless functional components (react/no-this-in-sfc)

When using a stateless functional component (SFC), props/context aren't accessed in the same way as a class component or the `create-react-class` format. Both props and context are passed as separate arguments to the component instead. Also, as the name suggests, a stateless component does not have state on `this.state`.

Attempting to access properties on `this` can be a potential error if someone is unaware of the differences when writing a SFC or missed when converting a class component to a SFC.
In React, there are two styles of component. One is a class component: `class Foo extends React.Component {...}`, which accesses its props, context, and state as properties of `this`: `this.props.foo`, etc. The other are stateless functional components (SFCs): `function Foo(props, context) {...}`. As you can see, there's no `state` (hence the name - hooks do not change this), and the props and context are provided as its two functional arguments. In an SFC, state is usually best implements with a [React hook](https://reactjs.org/docs/hooks-overview.html) such as `React.useState()`.

Attempting to access properties on `this` can sometimes be valid, but it's very commonly an error caused by unfamiliarity with the differences between the two styles of components, or a missed reference when converting a class component to an SFC.

## Rule Details

Expand Down
2 changes: 1 addition & 1 deletion lib/rules/no-this-in-sfc.js
Expand Up @@ -11,7 +11,7 @@ const docsUrl = require('../util/docsUrl');
// Constants
// ------------------------------------------------------------------------------

const ERROR_MESSAGE = 'Stateless functional components should not use this';
const ERROR_MESSAGE = 'Stateless functional components should not use `this`';

// ------------------------------------------------------------------------------
// Rule Definition
Expand Down
2 changes: 1 addition & 1 deletion tests/lib/rules/no-this-in-sfc.js
Expand Up @@ -8,7 +8,7 @@
// Constants
// ------------------------------------------------------------------------------

const ERROR_MESSAGE = 'Stateless functional components should not use this';
const ERROR_MESSAGE = 'Stateless functional components should not use `this`';

// ------------------------------------------------------------------------------
// Requirements
Expand Down