#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 /…