What has better performance? Hook on parent component and pass prop to `PureComponent` OR Hook on child component and use `FunctionalComponent`

Overview

I'm refactoring some older code that has some class based components and I need some clarification on the performance of PureComponent.

Issue

Previously, the translation hook was at the top level and passed to ALL components, but I refactored those already to call the hook at the component level. There's one remaining component Terms that the other developers want to leave as a pure component, which would mean I couldn't call the hook on a class based pure component and would have to pass as a prop.

I have two options of passing a translation/localization variable: as prop or hook on child component. What would be the best option in terms of performance renders?

• Option #1: Hook on parent component and pass prop to PureComponent
• Option #2: Hook on child component and use FunctionalComponent

OPTION #1 (Top Level + Pass prop to Pure component)

ParentComponent.tsx

export const ParentComponent = (sectionType: SectionType): JSX.Element | null => {
    const { t } = useTranslation(); // TRANSLATION HOOK HERE (TOP LEVEL)

    switch (sectionType) {
        case SectionType.Welcome:
            return <Welcome /> // HAS TRANSLATION HOOK ON COMPONENT
        case SectionType.Contact:
            return <Contact /> // HAS TRANSLATION HOOK ON COMPONENT
        case SectionType.Terms:
            return <Terms t={t} /> // TRANSLATION IS PASSED AS PROP TO PURE COMPONENT
        default:
            return null;
    }
};

ChildComponent.tsx

interface IProps {
    t: TFunction<"translation">;
}

export default class Terms extends React.PureComponent<IProps> {
    render(): JSX.Element {
        return (


        )
    }
};

OPTION #2 (No prop + Functional component)

ParentComponent.tsx

export const ParentComponent = (sectionType: SectionType): JSX.Element | null => {
    switch (sectionType) {
        case SectionType.Welcome:
            return <Welcome /> // HAS TRANSLATION HOOK ON COMPONENT
        case SectionType.Contact:
            return <Contact /> // HAS TRANSLATION HOOK ON COMPONENT
        case SectionType.Terms:
            return <Terms /> // HAS TRANSLATION HOOK ON COMPONENT
        default:
            return null;
    }
};

ChildComponent.tsx

export const Terms = () => JSX.Element {
    const { t } = useTranslation(); // TRANSLATION HOOK HERE (TOP LEVEL)

    return (

    )
};