Skip to content

jsx-no-leaked-render performs redundant props check and invalid fix in coerce mode #3431

Closed
@wialy

Description

@wialy

Context

There is a sample Checkbox component:

const Checkbox = ({
  isChecked = false,
  isIndeterminate = false,
}: {
  isChecked?: boolean;
  isIndeterminate?: boolean;
}) => (
  <input 
    checked={isIndeterminate ? false : isChecked} 
    type="checkbox"
  />
);

The eslint config file contains a rule:

"react/jsx-no-leaked-render": ["error", { validStrategies: ["coerce"] }],

Expected behavior

Linting the code raises no issues

Actual behavior

  1. Eslint displays an error for the line:
checked={isIndeterminate ? false : isChecked}
Potential leaked value that might cause unintentionally rendered values or rendering crasheseslint[react/jsx-no-leaked-render](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-no-leaked-render.md)
  1. When auto-fix is performed, the code above is replaced with
checked={!!isIndeterminate && false} 

which causes the logical issues (the isChecked is removed in that case).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions