Оптимизация загрузки React

#reactjs #optimization #react-hooks

#reactjs #оптимизация #реагирующие крючки

Вопрос:

Я использую React hook для рендеринга двух API. Всего у меня есть 40 вариантов, чтобы завершить всю загрузку, мне потребуется полминуты для загрузки около 40 вариантов, что слишком долго. Что я должен сделать, чтобы сократить время загрузки на стороне интерфейса React?

 useEffect(() => {
    loadingChoice(questionId)
    loadingCheckChoice(questionId, detail.participantId)
}, [questionId])

const loadingChoice = async (questionId) => {
    const query = {
        questionId,
    }
    try {
        const choicesData = await getChoices(query)
        const choicesNew = choicesData
        setChoices(choicesNew)
        const choicesNotApplicableChoicesNew = choicesNew.filter((choice) => choice.type === "Not Applicable")
        const choicesStandardChoices = choicesNew.filter((choice) => choice.type !== "Not Applicable")
        setChoicesNotApplicableChoices(choicesNotApplicableChoicesNew)
        setChoicesStandardChoices(choicesStandardChoices)
    } catch (e) {}
}

const loadingCheckChoice = async (questionId, participantId) => {
    const query = { questionId, participantId }
    try {
        const responsesData = await getResponses(query)
        if (responsesData.length) {
            const checkedChoice = responsesData[0].choice_id
            setCheckedRadio(checkedChoice)
        }
        handleProcessing()
    } catch (e) {}
}
  

Комментарии:

1. Я думаю, первым вариантом должно быть сделать серверный API более быстрым. Но все же, если вы хотите добиться большего во внешнем интерфейсе, я думаю, вы можете взглянуть на хуки useCallback() и useMemo() для управления производительностью. По сути, эти перехваты помогут вам предотвратить перезагрузку / вызов API, когда в этом нет необходимости

2. Возможно, одновременные запросы на основе предоставленного вами сценария developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…