Странности в async/await

Вопрос-ответ JavaScript
1

Всем привет.

Не могу понять, почему код работает так)))

Проблема: с async/await модальное окно рендериться два раза.

Код.

   import { showInfoModal } from 'oldModules/components/errors-modal/errors-modal';

   updatePlanningData = async () => {
     const popupSaving = Popup.show(
       'Идет сохранение данных...',
       TYPE_SUCCESS,
       false,
     );
     this.setState({ pending: true });

     const res = await this.props.onClick();
     this.setState({ pending: false });
     popupSaving.close();
     showInfoModal(res);
   };

код в errors-modal

export default class ErrorsModal extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            showModal: true,
        };

        this.hideModal = this.hideModal.bind(this);
    }

    hideModal() {
        this.setState({showModal: false});
    }

    render() {
        console.log('ErrorsModal');
        return (
            this.state.showModal &&
            <Modal show={this.state.showModal} onHide={this.hideModal} className={'errors-modal'} bsSize={'large'}>
                <BodyModalError {...this.props}/>
            </Modal>
        )
    }
}

export function showInfoModal (response) {
    let div = document.createElement('div');
    document.getElementsByTagName('body')[0].appendChild(div);
    console.log('showInfoModal');
    ReactDom.render(
        <ErrorsModal response={response} />,
        div
    );
};

В таком исполнении при нажатии на кнопку срабатывает updatePlanningData, потом уходит ajax запрос, после того как приходят данные в res записываются эти данные и алгоритм идет дальше. А вот потом происходит магия:
сначала прорисовывается ErrorsModal, потом после нее подхватывается showInfoModal и прорисовывает ее еще раз. Почему именно так, я не могу понять.
Какие есть варианты?

Если например я убираю async/await и вставляю статические данные, то вызывается сразу showInfoModal и модальное окно прорисовывается один раз.

Т.е в функции updatePlanningData:

import { showInfoModal } from 'oldModules/components/errors-modal/errors-modal';
updatePlanningData = () => {
      const popupSaving = Popup.show(
        'Идет сохранение данных...',
        TYPE_SUCCESS,
        false,
      );
      this.setState({ pending: false });
      popupSaving.close();
      showInfoModal({
        response: {
          message: 'Рейтинги обновлены!',
          successCount: 1,
        }
      });
    };
2

не вникал сильно в код, но если дело действительно в async/await, то тут ничего странного. await является асинхронной операцией. Если в this.props.onClick(); у тебя меняются стейты, и при этом this.props.onClick(); всегда будет асинхронен из-за await, то там будет ререндер. А после идет this.setState({ pending: false }), который создает следующий ререндер.

3

В this.props.onClick(); возвращается Promise.resolve(response) вот так:

export const savePlanningData = (data: InputProps) =>
  HelperAjax.sendAjaxRequest(
    '/plan/update-planning-data',
    'post',
    data,
    response => Promise.resolve(response),
  );

Также если я оставляю в updatePlanningData, только это

updatePlanningData = async () => {
      const res = await this.props.onClick();
      showInfoModal(res);
    };

все равно рендер происходит 2 раза.