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

[Bug]: Excessive code changes done by --fix react/jsx-no-leaked-render #3551

Closed
2 tasks done
gersongoulart opened this issue Mar 18, 2023 · 4 comments · Fixed by #3623
Closed
2 tasks done

[Bug]: Excessive code changes done by --fix react/jsx-no-leaked-render #3551

gersongoulart opened this issue Mar 18, 2023 · 4 comments · Fixed by #3623

Comments

@gersongoulart
Copy link

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
  • My issue appears in the command-line and not only in the text editor

Description Overview

When using 'react/jsx-no-leaked-render': ['error', { validStrategies: ['coerce', 'ternary'] }], and running eslint --fix the resulting code changes go beyond what's required for the actual fix by also removing parentheses, causing excessive code diffs.

Screenshot 2023-03-17 at 9 03 07 PM

I would expect the second hunk to be a single line change, just like the first hunk. Running this fix across a large codebase is unfeasible because the changes cannot be human-verified.

eslint --fix with 'react/jsx-no-leaked-render': ['error', { validStrategies: ['coerce', 'ternary'] }],

Expected Behavior

I'd expect no parentheses would be removed and no code-style to change. Other than the !! required to fix the issue, nothing else at all should change in the code.

Screenshot 2023-03-17 at 9 09 34 PM

eslint-plugin-react version

7.21.5

eslint version

8.35.0

node version

16.13.1

@ljharb
Copy link
Member

ljharb commented Mar 18, 2023

I agree with the parens, in particular because that is a much better style anyways :-)

@ljharb
Copy link
Member

ljharb commented Mar 18, 2023

cc @akulsr0

@akulsr0
Copy link
Contributor

akulsr0 commented Aug 25, 2023

As I can understand, is following expectations correct?

Input:

const MyComponent = () => {
  return (
    <>
      {someCondition && (
        <div>
          <p>hello</p>
        </div>
      )}
    </>
  )
}

Current Output:

const MyComponent = () => {
  return (
    <>
      {!!someCondition && <div>
          <p>hello</p>
        </div>}
    </>
  )
}

Expected Output:

const MyComponent = () => {
  return (
    <>
      {!!someCondition && (
        <div>
          <p>hello</p>
        </div>
      )}
    </>
  )
}

@ljharb
Copy link
Member

ljharb commented Aug 25, 2023

Yep, that’s right.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants