Add fix for prefer-stateless-function #1229

RiddleMan · 2017-05-30T08:20:30Z

Fixes #1096.
I've managed to accomplish this fix! Yay!
Also, I had tested this on my codebase and worked nicely.

I've added one module for indentation detection because I'd like to keep original formatting of the elements.
Unfortunately, This solution works only for ES6 components. This code does not handle ES5 ones, but I created a possibility to add later fix for those too.

I'm open for the suggestions :)

ljharb

Please add some test cases that use the default parser as well, so it's not just testing babel-eslint.

ljharb · 2017-05-30T19:55:57Z

docs/rules/prefer-stateless-function.md

@@ -2,6 +2,8 @@

 Stateless functional components are simpler than class based components and will benefit from future React performance optimizations specific to these components.

+**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.


I'm not sure this is accurate unless it can fix all errors that the rule warns on.

Yes, you are right. We should postpone this line until the rule is fully fixable.

ljharb · 2017-05-30T21:27:28Z

lib/rules/prefer-stateless-function/index.js

        var isRender = name === 'render';
-        return !isDisplayName && !isPropTypes && !contextTypes && !isUselessConstructor && !isRender;
+        return !(


i kind of feel like the prior form was more readable; a bunch of "nots" seems easier to understand to me than a bunch of positives, negated

Agree ;) I've saved couple characters, but the readability of previous one is much better.

ljharb · 2017-05-30T21:35:34Z

(This is awesome, btw, thanks!)

lib/rules/prefer-stateless-function/fixer.js

ljharb · 2017-05-31T18:30:31Z

tests/lib/rules/prefer-stateless-function.js

+        '}'
+      ].join('\n'),
+      output: [
+        'let Foo = (props) => {};'


Why does the fixer output an arrow function for SFCs?

This will run afoul of, for example, the airbnb style guide, which only allows named functions as SFCs. If we instead defaulted to a normal named function here, other rules would be able to convert it to an arrow.

Also, converting from a class declaration to an expression isn't always a safe change; the only safe replacement for class is a function declaration (which will be an expression when in expression position).

lib/rules/prefer-stateless-function/fixer.js

ljharb

This LGTM! It would be ideal to also support auto fixing React.createClass instances as well, tho.

RiddleMan · 2017-06-01T05:46:26Z

@ljharb Yes, I think it's doable by me. Let me look into this in the next week.
Do you think, that we should merge what we have here and then add support for createClass?
Or should I add fixer for that in a scope of this PR?

For me both options are ok.

ljharb · 2017-06-01T05:53:16Z

Since this needs to wait for other collabs to review before merging, I'd say we'll play it by ear.

jseminck · 2017-06-02T08:31:36Z

tests/lib/rules/prefer-stateless-function.js

+        '  ',
+        '  return <div>{props.test}</div>;',
+        '}',
+        'Foo.propTypes={foo: PropTypes.func};',


I would like to see an empty line between the closing } and the Foo.propTypes assignment. It's a personal taste though. What do others think?

That seems like something another rule should be handling.

jseminck · 2017-06-02T08:32:11Z

I ran this on my code-base which only uses class syntax, no stateless function components at all, and it seems to work pretty well. I found one issue where the prefer-stateless-function rule doesn't detect well, I will create a ticket for that.

I added a tiny comment about a syntactical preference, but it's very personal: https://github.com/yannickcr/eslint-plugin-react/pull/1229/files#r119805697

deecewan · 2017-07-06T00:05:31Z

EDIT: You can ignore this comment. I checked the source of the actual rule, and it doesn't deal with context either, I don't think. It definitely could, but that's a separate issue.

This doesn't seem to handle the case of context.

For instance,

class MyComponent extends Component {
    render() {
        <div>{this.context.thing}</div>
    }
}

could be re-written as

function MyComponent(props, context) {
  return (
      <div>{context.thing}</div>
  );
}

I'd like to see a test case that uses context, even if it doesn't support fixing context.

ljharb

This needs a rebase and then a rereview

ljharb · 2018-12-27T21:33:04Z

@RiddleMan if you're able to rebase this, it'd be great to land it :-)

golopot · 2019-06-29T07:41:50Z

I rebased this. https://github.com/golopot/eslint-plugin-react/tree/pr-1229 . (Commits are squashed and the three files are merged to one.)

ljharb · 2019-08-19T06:17:10Z

@RiddleMan would you mind checking the "allow edits" box on the RHS of the PR?

RiddleMan · 2019-08-19T07:45:26Z

@ljharb I'm worried that I don't have such checkbox on the RHS. The explanation is simple... accidentally I removed my fork :/ Can we just create a new one with golopot's changes? Or anything you find fit.

ljharb · 2019-08-31T06:32:25Z

@RiddleMan oof, that's unfortunate. you could try recreating the fork and see what happens?

ljharb · 2019-12-30T00:19:37Z

@golopot i suppose we'll need to make a new PR. Mind creating one from your branch?

ljharb · 2020-08-09T20:42:13Z

ping @golopot

Closes jsx-eslint#1229. Fixes jsx-eslint#1096.

ljharb · 2020-10-16T07:40:26Z

I've rebased this and added the correct output results here: https://github.com/ljharb/eslint-plugin-react/tree/pr-1229. Test results are here: https://github.com/ljharb/eslint-plugin-react/runs/3657318331.

Help is welcome.

Closes #1229. Fixes #1096.

ljharb · 2024-07-20T04:36:16Z

It'd be great if someone wants to file a new PR that solves this; but unfortunately this one is unrecoverable.

RiddleMan added 5 commits May 29, 2017 20:39

Init PoC

3443189

Add fix for prefer-stateless-function

8ecef09

Add info about fix in Readme.md

a6f0af2

Remove unnecassary comment

46d0ff1

Merge remote-tracking branch 'upstream/master' into prefer-stateless-fix

5ca9327

RiddleMan changed the title ~~Add fix for prefer-stateless-function #1096~~ Add fix for prefer-stateless-function May 30, 2017

ljharb requested changes May 30, 2017

View reviewed changes

Fix review suggestions

76c180c

ljharb requested changes May 31, 2017

View reviewed changes

Fix review suggestion attempt #2

192fb73

ljharb reviewed May 31, 2017

View reviewed changes

lib/rules/prefer-stateless-function/fixer.js Outdated Show resolved Hide resolved

Fix review suggestions attempt #3

ce05fd2

ljharb approved these changes Jun 1, 2017

View reviewed changes

jseminck reviewed Jun 2, 2017

View reviewed changes

ljharb requested changes Jul 29, 2017

View reviewed changes

yannickcr force-pushed the master branch from f4737f0 to 73abadb Compare August 9, 2017 21:48

yannickcr force-pushed the master branch from c8dedeb to dc9f85e Compare September 24, 2017 18:16

yannickcr force-pushed the master branch from dca5cd5 to c148893 Compare November 18, 2017 17:26

ljharb mentioned this pull request Dec 27, 2018

Add detection of subRender methods to prefer-stateless-function #1313

Closed

serhalp mentioned this pull request Jul 9, 2020

Update React config goodeggs/eslint-plugin-goodeggs#436

Merged

ljharb pushed a commit to ljharb/eslint-plugin-react that referenced this pull request Oct 16, 2020

[New] prefer-stateless-function: add fixer

325a223

Closes jsx-eslint#1229. Fixes jsx-eslint#1096.

ljharb added the help wanted label Oct 16, 2020

ljharb marked this pull request as draft October 16, 2020 07:40

ljharb pushed a commit that referenced this pull request Sep 20, 2021

[New] prefer-stateless-function: add fixer

d3c07c8

Closes #1229. Fixes #1096.

ljharb added the enhancement label Sep 20, 2021

ljharb closed this Jul 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add fix for prefer-stateless-function #1229

Add fix for prefer-stateless-function #1229

RiddleMan commented May 30, 2017 •

edited

Loading

ljharb left a comment

ljharb May 30, 2017

RiddleMan May 31, 2017

ljharb May 30, 2017

RiddleMan May 31, 2017

ljharb commented May 30, 2017

ljharb May 31, 2017 •

edited

Loading

RiddleMan May 31, 2017

ljharb left a comment

RiddleMan commented Jun 1, 2017

ljharb commented Jun 1, 2017

jseminck Jun 2, 2017

ljharb Jun 2, 2017

jseminck commented Jun 2, 2017

deecewan commented Jul 6, 2017 •

edited

Loading

ljharb left a comment

ljharb commented Dec 27, 2018

golopot commented Jun 29, 2019

ljharb commented Aug 19, 2019

RiddleMan commented Aug 19, 2019

ljharb commented Aug 31, 2019

ljharb commented Dec 30, 2019

ljharb commented Aug 9, 2020

ljharb commented Oct 16, 2020 •

edited

Loading

ljharb commented Jul 20, 2024

		@@ -2,6 +2,8 @@

		Stateless functional components are simpler than class based components and will benefit from future React performance optimizations specific to these components.

		Fixable: This rule is automatically fixable using the `--fix` flag on the command line.

Add fix for prefer-stateless-function #1229

Add fix for prefer-stateless-function #1229

Conversation

RiddleMan commented May 30, 2017 • edited Loading

ljharb left a comment

Choose a reason for hiding this comment

ljharb May 30, 2017

Choose a reason for hiding this comment

RiddleMan May 31, 2017

Choose a reason for hiding this comment

ljharb May 30, 2017

Choose a reason for hiding this comment

RiddleMan May 31, 2017

Choose a reason for hiding this comment

ljharb commented May 30, 2017

ljharb May 31, 2017 • edited Loading

Choose a reason for hiding this comment

RiddleMan May 31, 2017

Choose a reason for hiding this comment

ljharb left a comment

Choose a reason for hiding this comment

RiddleMan commented Jun 1, 2017

ljharb commented Jun 1, 2017

jseminck Jun 2, 2017

Choose a reason for hiding this comment

ljharb Jun 2, 2017

Choose a reason for hiding this comment

jseminck commented Jun 2, 2017

deecewan commented Jul 6, 2017 • edited Loading

ljharb left a comment

Choose a reason for hiding this comment

ljharb commented Dec 27, 2018

golopot commented Jun 29, 2019

ljharb commented Aug 19, 2019

RiddleMan commented Aug 19, 2019

ljharb commented Aug 31, 2019

ljharb commented Dec 30, 2019

ljharb commented Aug 9, 2020

ljharb commented Oct 16, 2020 • edited Loading

ljharb commented Jul 20, 2024

RiddleMan commented May 30, 2017 •

edited

Loading

ljharb May 31, 2017 •

edited

Loading

deecewan commented Jul 6, 2017 •

edited

Loading

ljharb commented Oct 16, 2020 •

edited

Loading