False positive in no-unused-prop-types

[Matt Hargett]

With the reduction below based on production code, the eslint-plugin-react-redux has these false positives:

  5:13  error  'maxItems' PropType is defined but prop is never used                react-redux/no-unused-prop-types
  7:27  error  'itemOpacityOutputRange' PropType is defined but prop is never used  react-redux/no-unused-prop-types
  8:27  error  'textOpacityOutputRange' PropType is defined but prop is never used  react-redux/no-unused-prop-types

The code in question:

// @flow
import * as React from 'react';

type Props = {
  maxItems: number,
  size?: number,
  itemOpacityOutputRange: Array<number>,
  textOpacityOutputRange: Array<number>,
  itemScaleOutputRange: Array<number>,
  items: Array<*>,
  shouldTranslate?: boolean,
  shouldDebounce?: boolean,
  children: Object => React.Node,
};

type State = {
  foo: number,
  bar: number,
};

function computeStateFromProps(props: Props) {
  const { maxItems, shouldTranslate, itemOpacityOutputRange, textOpacityOutputRange, itemScaleOutputRange } = props;

  if (maxItems && shouldTranslate && itemOpacityOutputRange && textOpacityOutputRange && itemScaleOutputRange) {
    return { foo: 0, bar: 0 };
  }
  return { foo: 1, bar: 0 };
}

export default class ItemAnimator extends React.PureComponent<Props, State> {
  static defaultProps = {
    shouldTranslate: false,
    shouldDebounce: false,
  };

  constructor(props: Props) {
    super(props);
    this.state = computeStateFromProps(props);
    if (props.shouldDebounce) {
      this.state.foo = 0;
    }
  }

  animate = (index: ?number) => {
    this.animateItem(index);
    this.animateText(index);
  };

  animateItem = (index: ?number) => {
    const { items, size, itemScaleOutputRange, shouldTranslate } = this.props;
    if (index && items && size && itemScaleOutputRange && shouldTranslate && index) return 0;
    return 1;
  };

  animateText = (index: ?number) => {
    const { items } = this.props;
    if (items && index) return 0;
    return 1;
  };

  render() {
    const {
      animateItem,
      animateText,
      animate,
      props: { children },
    } = this;

    return <>{children({ animateItem, animateText, animate })}</>;
  }
}

[DianaSuvorova]

@matthargett , this plugin uses eslint-plugin-react rule under the hood, so in this case you are hitting something like this issue: jsx-eslint/eslint-plugin-react#2155 or this jsx-eslint/eslint-plugin-react#855

Maintainers of eslint-plugin-react generally suggest to not pass generic prop object to helper functions like computeStateFromProps in your case, but destructure props in the constructor, thus their usage will be detected correctly.