jsx-eslint/eslint-plugin-react

`react/no-unstable-nested-components` does not allow ignoring only object properties

Open

#3482 opened on Nov 4, 2022

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

Description

I would like to keep this rule active but disable it for object properties, I have this:

function MyComponent() {
  return (
    <p>
      {intl.formatMessage(messages.allSelected, {
        size: selectedEvents.size,
        b: chunks => <b>{chunks}</b>, // <-- report error here without `allowAsProps`
      })}
    </p>
  );
}

But adding the allowAsProps: true option allows me to do things like this:

<Dropdown
  Trigger={({ onClick }) => ( // <-- don't report error here with `allowAsProps`
    <button type="button" onClick={onClick}>
      Bla bla
      <span className="caret" />
    </button>
  )}
>
  {/* ... */}
</Dropdown>

Contributor guide

Tech stack
javascriptreact
Domain
frontendtooling
Issue type
feature
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.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ESLint plugin developmentAST traversalJavaScriptReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the implementation of the `react/no unstable nested components` rule in the eslint plugin react repository, particularly the handling of the `allowAsProps` option. The goal is to add a new option that only ignores object properties (object values) rather than all props. Key files to examine: the rule definition file (likely `lib/rules/no unstable nested components.js`) and its tests. Consider adding a new option like `allowObjectProperties` or modifying the existing `allowAsProps` to be more granular. No linked pull requests or maintainer comments are present, so the feature request is open for implementation.