eslint-plugin-react
eslint-plugin-react copied to clipboard
jsx-eslint
react/function-component-definition: False positive on Redux mapStateToProps function
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.
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.
Presumably that means it is still a violation, it's just that the autofix makes it not be one?
That makes sense. I suspect the categorization changed a bit so that it now hits a different rule that has an autofix.
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
If I understand this correctly, the function-component-definition rule should only work on React components specifically ones that return JSX.