Реагировать на ожидание asyn c или повторить?

Question

У меня есть компонент, который отображает данные, полученные с сервера.

Я мог бы подумать о двух вариантах использования в этом случае.

1. Триггерная функция выборки в componentDidMount() и выполнить рендеринг с исходными (пустыми) данными и разрешить повторный рендеринг при заданном состоянии
2. await в componentDidMount() и дождаться ответа сервера, затем выполнить рендеринг с полученными данными

Option1 будет загружаться немного быстрее без данных, а затем перерисовываться с данными (всего 2), а Option2 будет рендериться только один раз, но компонент будет отображаться медленнее.

Какой из них лучше?

Answer 1

Это зависит от того, какой дизайн / спрос у вас есть.

Один из нормальных подходов - добавить loading анимацию (например, material-ui loading ) для запроса. И только сделать, когда ответ будет достигнут.

async componentDidMount() {
  await this.request();
}
async request() {
  const req: ReqParamsType = {
    ...
  }
  this.setState({loading: true});
  await this.props.getReports(req);
  this.setState({loading: false});
}

render() {
  const { loading } = this.state;
  return (
    {loading ? <LoadingAnimation /> : <MainContent />}
    ...