react/function-component-definition: False positive on Redux mapStateToProps function

[bhollis]

After upgrading to 7.25.0 I get a false positive from react/function-component-definition on the anonymous arrow function returned inside this:

function mapStateToProps() {
  const internItems = makeInternArray<DimItem>();
  const internClassList = makeInternArray<DestinyClass>();

  return (
    state: RootState,
    props: ProvidedProps
  ): StoreProps & {
    store: DimStore | null;
  } => {
    const { store, bucket, singleCharacter } = props;

    let items = findItemsByBucket(store, bucket.hash);
    if (singleCharacter && store.isVault && bucket.vaultBucket) {
      for (const otherStore of storesSelector(state)) {
        if (!otherStore.current && !otherStore.isVault) {
          items = [...items, ...findItemsByBucket(otherStore, bucket.hash)];
        }
      }
      const currentStore = currentStoreSelector(state)!;
      items = items.filter(
        (i) => i.classType === DestinyClass.Unknown || i.classType === currentStore.classType
      );
    }

    return {
      store: null,
      destinyVersion: store.destinyVersion,
      storeId: store.id,
      storeName: store.name,
      storeClassType: store.classType,
      isVault: store.isVault,
      items: internItems(items),
      itemSortOrder: itemSortOrderSelector(state),
      // We only need this property when this is a vault armor bucket
      storeClassList:
        store.isVault && bucket.inArmor
          ? internClassList(sortedStoresSelector(state).map((s) => s.classType))
          : emptyArray(),
      characterOrder: characterOrderSelector(state),
      isPhonePortrait: isPhonePortraitSelector(state),
    };
  };
}

Since this is returning an object and not JSX, I don't think it should be detected as a React component.

[ljharb]

This may be related to #3054.

[bhollis]

This is fixed in 7.25.1

[bhollis]

Actually I spoke a touch too soon - it's no longer a violation but autofix now rewrites the arrow function to a regular function because I have react/function-component-definition enabled.

[ljharb]

Presumably that means it is still a violation, it's just that the autofix makes it not be one?

[bhollis]

That makes sense. I suspect the categorization changed a bit so that it now hits a different rule that has an autofix.

[mithodin]

This also gets incorrectly detected as a React component:

export default (key, subTree = {}) =>
    (state) => {
        const dataInStore = getFromDataModel(key)(state);
        const fullPaths = dataInStore.map((item, index) => {
            return [key, index];
        });

        return {
            key,
            paths: fullPaths.map((p) => [p[1]]),
            fullPaths,
            subTree: Object.keys(subTree).length ? subTree : null,
        };
    };

Version 7.28.0 and 7.29.4

[GiancarlosIO]

👀

[TildaDares]

@ljharb I'd like to work on this.

[TildaDares]

If I understand this correctly, the function-component-definition rule should only work on React components specifically ones that return JSX.

[ljharb]

@TildaDares yes, this seems to be related to component detection.