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 (    )};