Don't misuse render prop pattern

[axelboc]

I've relaxed the rule react/no-unstable-nested-components to allow the render prop pattern:

<ErrorBoundary
  fallbackRender={(args) => (
    <ErrorFallback className={visualizerStyles.vis} {...args} />
  )}
/>

The code above is okay (and unavoidable) as long as fallbackRender is used as a function inside ErrorBoundary - e.g. {fallbackRender(...args)}.

It's not okay when the render prop is used as a component. An example of this was the icon prop of the Btn component:

// Btn.tsx
const { icon: Icon } = props;
return <>{Icon && <Icon className={styles.icon} />}</>

<Btn
  // render prop but used as component
  icon={(iconProps) => (
    <FiItalic
      transform="skewX(20)"
      style={{ marginLeft: '-0.25em', marginRight: '0.0625rem' }}
      {...iconProps}
    />
  )}
/>

Unfortunately, react/no-unstable-nested-components cannot detect these two cases, which leads to false positives. Since the render prop pattern is legitimate and unavoidable in many cases, the rule could lead to worse solutions. So I've decided to turn on the rule's allowAsProp option, which allows passing "nested" components as props.

I'm also fixing the icon prop by turning it into a component prop:

// Btn.tsx
const { Icon } = props;
return <>{Icon && <Icon className={styles.icon} />}</>

<Btn
  // good component prop (icon is extracted into its own component)
  Icon={ErrorsIcon}
/>

[loichuder]

Should we use a specific propNamePattern ?

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md#rule-options

[axelboc]

Meh 🤷 — to be honest, I'm considering moving away from eslint-plugin-react altogether. I've had to turn off another rule in MXCuBE because it can't actually do what it's supposed to. The last comment in the issue linked actually mentions another plugin called ESLint React, which seems to want to replace eslint-plugin-react. The rules look a lot smarter. To be continued...