Вы бы предпочли сделать несколько асин c запросов заранее и передать их на дочерние компоненты, или разделить их?

Question

Это скорее открытый вопрос, но мне было интересно, какой будет предпочтительный способ решения этой проблемы:

У меня есть компонент Tabs, и я подумывал сделать несколько асинхронных c вызывает в родительском компоненте, а затем передает необходимые данные дочерним элементам следующим образом:

const ParentComponent = (props) => {
    const res1 = useQuery(query1);
    const res2 = useQuery(query2);
    const res3 = useQuery(query3);
    const res4 = useQuery(query4);
    const res5 = useQuery(query5);

    if (
        res1.loading ||
        res2.loading ||
        res3.loading ||
        res4.loading ||
        res5.loading ||
    ) {
        return <LoadingCircle />
    }

    // Vaguely this, not exact
    return (
        <Tabs>
            <Tab>
                <ChildComponent1 data={res1.data} />
            </Tab>
            <Tab>
                <ChildComponent2 data={res1.data} otherData={res3.data}/>
            </Tab>
            <Tab>
                <ChildComponent3 data={res4.data} />
            </Tab>
            <Tab>
                <ChildComponent4 data={res2.data} otherData={res1.data} />
            </Tab>
        </Tabs>
    )
}

Однако я думал, что начальная загрузка может быть немного большой, поскольку она получает большое количество data ... Желательно ли, чтобы каждый дочерний компонент выполнял свои собственные асинхронные вызовы c, несмотря на возможность повторного использования одного и того же запроса? Например:

const ChildComponent1 = () => {
    const res1 = useQuery(getMember);
    const res2 = useQuery(getProgress);

    // ....
}

const ChildComponent2 = () => {
    const res1 = useQuery(getMember);
    const res2 = useQuery(getAppointment);

    // ....
}

const ChildComponent3 = () => {
    const res1 = useQuery(getOtherThing);
    // ....
}

Таким образом, первоначально вызов будет менее затратным, но потребуется загрузка каждой вкладки. Я немного сбит с толку, какой метод будет лучше / предпочтительнее.

Мне интересно, как вы все подойдете к этому!

Answer 1

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

Только представьте, сколько будет первого начального рендера, если у вас есть тонны элементов, и все они появляются одновременно.

Большое время загрузки разочаровало бы конечного пользователя и, скорее всего, заставило бы его покинуть веб-сайт.

Answer 2

Разделение концерна

, если это не требуется, сделайте это в соответствующем компоненте. Каждый компонент должен получать свои соответствующие данные через API и обрабатывать, как это должно быть. Компоненты не должны быть толстыми и выдерживать только минимально необходимые функциональные возможности, а не помещать каждую вещь в один гигантский компонент.