Skip to content

linter: react/no-this-in-sfc should not flag this used as argument (e.g., .bind(this)) #20959

@ahmedelgabri

Description

@ahmedelgabri

What version of Oxlint are you using?

1.58.0

What command did you run?

oxlint -c oxlint.json test.tsx

What does your .oxlintrc.json (or oxlint.config.ts) config file look like?

{
	"plugins": ["react"],
	"rules": {
		"react/no-this-in-sfc": "error"
	}
}

What happened?

react/no-this-in-sfc flags any this expression inside a functional component, including this passed as an argument
to .bind(). ESLint only flags this used as a member expression base (e.g., this.props, this.state).

Minimal reproduction (playground)

test.tsx:

function reopen(q: string) {
	console.log(q)
}

// Case 1: this.props -- should be flagged
const Bad = (props: {bar: string}) => {
	return <div>{this.props.bar}</div>
}

// Case 2: .bind(this) -- should NOT be flagged
const Good = ({query}: {query: string}) => {
	return <div onClick={reopen.bind(this, query)}>click</div>
}

Expected: Only case 1 (this.props.bar) is flagged.

Actual: Both cases are flagged:

x eslint-plugin-react(no-this-in-sfc): Stateless functional components should not use `this`
  ,-[test.tsx:7:15]
6 | const Bad = (props: {bar: string}) => {
7 |     return <div>{this.props.bar}</div>
  :                  ^^^^

x eslint-plugin-react(no-this-in-sfc): Stateless functional components should not use `this`
  ,-[test.tsx:12:35]
11 | const Good = ({query}: {query: string}) => {
12 |     return <div onClick={reopen.bind(this, query)}>click</div>
   :                                      ^^^^

ESLint comparison

Both ESLint 7.23.0 and ESLint 10.1.0 (with eslint-plugin-react@7.37.5) only flag case 1 (this.props.bar), not case 2
(.bind(this)).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Priority

    None yet

    Effort

    None yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions