jsx-eslint/eslint-plugin-react

jsx-no-leaked-render removes parentheses effecting formatting

Open

#3357 opened on Aug 15, 2022

View on GitHub
 (6 comments) (1 reaction) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
bughelp wanted

Description

Hello I am trying to get the jsx-no-leaked-render to fix some code in my repo. When it runs its fix it is changing more code than necessary. In this case, it is removing parentheses around the conditionally rendered element. Although, not strictly necessary, the added parentheses are a convention we use in our codebase to keep formatting consistent, resulting in more clearly scoped conditional statements and components.

Although one could argue it doesn't matter for some people or its not a big deal, I think it's best that a rule not have any unintended effect on code structure other than what it is built to fix.

Note: This also happens when fixing strategy is set to coerce.

Before fixing

{item.validateResult && item.validateResult.error && (
  <ErrorWrapper>
    <ErrorIconContainer>
      <ErrorIcon name="info" size={40} />
    </ErrorIconContainer>
    <Text size="medium" $warning>
      {item.validateResult.error.message}
    </Text>
  </ErrorWrapper>
)}

After fixing

{item.validateResult && item.validateResult.error ? <ErrorWrapper>
    <ErrorIconContainer>
      <ErrorIcon name="info" size={40} />
    </ErrorIconContainer>
    <Text size="medium" $warning>
      {item.validateResult.error.message}
    </Text>
  </ErrorWrapper> : null}

Contributor guide

Tech stack
javascriptreact
Domain
frontendtooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Understanding of ESLint rule structureFamiliarity with React JSX
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
The issue reports that the `jsx no leaked render` rule's autofix removes parentheses around conditional expressions, which is unintended. Investigate the rule's implementation in `lib/rules/jsx no leaked render.js`. The fix should preserve existing parentheses when transforming the expression. Look into the `fix` function and consider using context.getSourceCode() to preserve original formatting. Also review existing test cases in `tests/lib/rules/jsx no leaked render.js` for patterns that include parentheses. Discuss with maintainers on the issue thread for guidance on the desired behavior.