Производительность useMediaQuery. Должен ли я передать его в подпорки или просто вызвать его снова во вложенном компоненте?

Question

Для передового опыта / производительности, я должен useMediaQuery один раз и передать его в props? или мне просто снова вызвать useMediaQuery во вложенном компоненте? Или это не имеет значения?

Так, например, это лучше:

function ParentComponent() {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints('sm'));

    // Used isMobile for something (whatever it is)    

    return <div>
        <ChildComponent isMobile={isMobile}/>
    </div>
}

function ChildComponent({isMobile}) {
    // Used isMobile for something (whatever it is)   

    return <div>This is a child</div> 
}

Или я должен это сделать?

function ParentComponent() {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints('sm'));

    // Used isMobile for something (whatever it is)    

    return <div>
        <ChildComponent/>
    </div>
}

function ChildComponent() {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints('sm'));

    // Used isMobile for something (whatever it is)   

    return <div>This is a child</div> 
}

Или оба будут выполнять точно так же?

Я знаю, что оба сработают. Я хочу знать, что один из них - лучшая практика или какой из них лучше с точки зрения производительности

Answer 1

Я полностью понял ваш вопрос. Я не вижу разницы в производительности, а также я искал useMediaQuery и ничего не нашел по нашему вопросу. И я думаю, что вы можете просто использовать, как вам удобно, для меня это удобно и более читабельно, чтобы использовать его везде, где вам нужно, не думайте об этом так много. И позже, если вы найдете новую информацию о ней или сами поймете, что она влияет на производительность, вы можете просто изменить способ и просто хранить в своем магазине (например, приставка). Но сейчас я использую этот хук, как вы делаете во 2-м варианте.

Answer 2

Насколько я знаю. Если несколько компонентов будут использовать один и тот же код, настройте этот код в отдельном файле, например Config. js (или Utils. js), и тогда мы сможем разместить наш код и экспортировать из этой папки. поэтому мы можем использовать этот код в нескольких местах. Теперь, если в этом коде появятся какие-либо изменения, нам просто нужно изменить только одно место в нашем файле конфигурации. js, и изменение будет применено ко всем местам.

import { useTheme } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";

const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints("sm"));

export { isMobile };