Eslint-plugin-react: False positive react/no-unused-prop-types

[nelsonprsousa]

Hey guys,

While I was coding I noticed something odd regarding react/no-unused-prop-types rules.

For some unknown reason, I have that error on renderStaticList but not on renderStaticItem nor renderCarousel. To my eyes they look similar, but I may be wrong.

error 'item' PropType is defined but prop is never used react/no-unused-prop-types

Am I missing here something? Thank you 🙏

Component TypeScript code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import LightStatusBar from 'components/common/light-status-bar';
import SafeAreaViewWrapper from 'components/common/safe-area-view-wrapper';
import CarouselItem from 'components/common/card';
import { useNavigation } from '@react-navigation/native';
import { INavigation } from 'interfaces/INavigation';
import CarouselSection from 'components/discover/carousel-section';
import { IHome } from 'interfaces/IHome';
import Section from 'components/discover/section';
import { FlashImage } from 'components/discover/header/toggle/styles';
import { theme } from 'styles';
import { ListRenderItem } from 'react-native';
import { IPointOfSale } from 'interfaces/IPointOfSale';
import { IContent } from 'interfaces/IContent';
import { ICarousel } from 'interfaces/ICarousel';
import { HomeFlatList, CarouselFlatList, StaticFlatList } from './styles';

const Home: React.FC = () => {
    const [home, setHome] = useState<IHome>();

    useEffect(() => {
        const fetchData = async (): Promise<void> => {
            const result = await axios('/points-of-sale?type=home');

            setHome(result.data);
        };

        fetchData();
    }, []);

    const navigation = useNavigation();
    const onPress = (navigationProp: INavigation) => () => {
        navigation.navigate(navigationProp.screenName, {
            screen: navigationProp.stackName,
            params: {
                screen: navigationProp.nestedScreenName,
                params: navigationProp.params,
            },
        });
    };

    const renderCarousel: ListRenderItem<ICarousel | any> = ({
        item,
    }: {
        item: ICarousel;
    }) => (
        <Section
            icon={<FlashImage />}
            title={item.title}
            titleFontSize={theme.typography.FONT_SIZE_24}
        >
            <CarouselSection pointsOfSale={item.carousel} />
        </Section>
    );

    const carouselKeyExtractor = (item: ICarousel | any): string => item.title;

    const listHeaderComponent = (): React.ReactElement => (
        <CarouselFlatList
            data={home?.carousels}
            renderItem={renderCarousel}
            keyExtractor={carouselKeyExtractor}
        />
    );

    const renderStaticItem: ListRenderItem<IPointOfSale | any> = ({
        item,
    }: {
        item: IPointOfSale;
    }) => (
        <CarouselItem
            title={item.title}
            subtitle={item.subtitle}
            imagePath={item.imagePath}
            width={96}
            onPress={onPress(item.navigation)}
            key={item.title}
        />
    );

    const staticItemKeyExtractor = (item: IPointOfSale | any): string =>
        item.title;

    const renderStaticList: ListRenderItem<IContent | any> = ({
        item,
    }: {
        item: IContent;
    }) => (
        <Section
            icon={<FlashImage />}
            title={item.title}
            titleFontSize={theme.typography.FONT_SIZE_24}
        >
            <StaticFlatList
                data={item.pointsOfSale}
                renderItem={renderStaticItem}
                keyExtractor={staticItemKeyExtractor}
            />
        </Section>
    );

    const staticListKeyExtractor = (item: IContent | any): string => item.title;

    return (
        <SafeAreaViewWrapper>
            <LightStatusBar />
            <HomeFlatList
                ListHeaderComponent={listHeaderComponent}
                data={home?.static}
                renderItem={renderStaticList}
                keyExtractor={staticListKeyExtractor}
            />
        </SafeAreaViewWrapper>
    );
};

export default Home;

[ljharb]

In general, "render functions" should be components. In the case of renderStaticList, our component detection is marking it as one.

Since its name is not PascalCased, and it's never used in a jsx context, it shouldn't be detected as a component.

[nelsonprsousa]

In general, "render functions" should be components. In the case of renderStaticList, our component detection is marking it as one.

Since its name is not PascalCased, and it's never used in a jsx context, it shouldn't be detected as a component.

I'll move those functions to a new component.

Should I leave this issue opened for further investigation regarding the detection of the component?

[ljharb]

Yes, thanks, that'd be great.

[jzabala]

Working on this 🙂