Eslint не распознает FunctionComponent, определенный внутри функции, и жалуется на использование внутри нее хука

Question

У меня есть функция создания компонента:

import useViewportCategory from '../../../hooks/viewport/useViewportCategory'

type CreateViewportRestrictor = (
    displayName: string,
    settings: { showOnDesktop?: boolean, showOnTablet?: boolean, showOnMobile?: boolean },
) => FunctionComponent

const createViewportRestrictor: CreateViewportRestrictor = (
    displayName,
    { showOnDesktop = false, showOnTablet = false, showOnMobile = false },
) => {
    const component: FunctionComponent = ({ children }) => {
        const viewportCategory = useViewportCategory()

        if (viewportCategory === 'DESKTOP' && !showOnDesktop) return null
        if (viewportCategory === 'MOBILE'  && !showOnMobile ) return null
        if (viewportCategory === 'TABLET'  && !showOnTablet ) return null

        return <>{children}</>
    }

    component.displayName = displayName

    return component
}

, которую я использую для генерации компонентов для моего приложения (MobileOnly, TabletOnly, et c.).

Однако eslint жалуется на использование хука useViewportCategory и мешает мне запустить приложение:

React Hook "useViewportCategory" вызывается в функции "component: FunctionComponent", которая не является ни функцией React компонент или пользовательская функция React Hook реагировать на хуки / правила хуков

Интересно, что приведение компонента в TypeScript исправляет ошибку:

const component: FunctionComponent = (({ children }) => {
    const viewportCategory = useViewportCategory()

    if (viewportCategory === DESKTOP && !showOnDesktop) return null
    if (viewportCategory === MOBILE  && !showOnMobile ) return null
    if (viewportCategory === TABLET  && !showOnTablet ) return null

    return <>{children}</>
}) as FunctionComponent

Что здесь происходит ?
Почему es lint распознает компоненты функций, определенные непосредственно внутри области модуля, но не здесь?
Что можно сделать, чтобы исправить эту ошибку без приведения типа / отключения правила eslint?

Answer 1

Попробуйте написать свою функцию в PascalCase:

const Component: FunctionComponent = (({ children }) => {
    const viewportCategory = useViewportCategory()

    if (viewportCategory === DESKTOP && !showOnDesktop) return null
    if (viewportCategory === MOBILE  && !showOnMobile ) return null
    if (viewportCategory === TABLET  && !showOnTablet ) return null

    return <>{children}</>
})

Правило Lint предполагает, что функция будет записана в PascalCase.