Использование setState в каждой итерации цикла - плохая практика?

Question

Вот небольшой фрагмент кода:

async componentDidMount() {
    ...
    this.state.postList.forEach(element => {
      this.fetchItem(element);
    });
}

async fetchItem(query) {
    ...
    this.setState( previousState => {
        const list = [...previousState.data, data];
        return { data: list };
    });
}

Мне любопытно узнать, является ли использование setState в каждой итерации цикла forEach плохой идеей или нет.Я подозреваю, что это влияет на производительность, но я хотел бы знать наверняка, потому что это казалось самым простым решением этой проблемы.

Answer 1

Вот альтернативный подход: обновите свой fetchItem, чтобы просто вернуть предмет.В вашем componentDidMount используйте Promise.all, чтобы получить все предметы, а затем передайте их в состояние за одну операцию.

async componentDidMount() {
    const items = await Promise.all(this.state.postList.map(element => fetchItem(element)));
    this.setState({data: items});
}

async fetchItem(query) {
    const item = await getItem(query) // however you accomplish this
    return item;
}

Answer 2

Мне интересно знать, является ли использование setState в каждой итерации цикла forEach плохой идеей или нет.

Если это будет непосредственно внутри итерации, то определенно yes , как React, чем объединяет все обновления, которые вы делаете во время итерации, что, вероятно, займет гораздо больше времени, чем если бы вы просто установили состояние после цикла.Однако в вашем случае вы запускаете асинхронное действие в каждой итерации, и, поскольку все асинхронные задачи завершаются в разное время, обновления запускаются не сразу.Основное преимущество вашего подхода состоит в том, что если эти асинхронные задачи занимают некоторое время (например, если вы выбираете много данных для каждой из них), то некоторая информация уже может отображаться, а некоторые все еще загружаются.Если все эти асинхронные вызовы загружают только небольшой объем данных, тогда вам следует изменить свой API, чтобы доставлять все данные одновременно.Так что это действительно зависит от вашего варианта использования, хорошо это или плохо.