Почему render выполняеться перед componentWillMount?
Потому что библиотека не ожидает возвращаемое значение в componentWillMount и следом сразу вызывает render.
Забудьте этот метод - он не рекомендован к использованию. Как уже писали выше, асинхронные запросы рекомендуется инициировать в componentDidMount. Он выполняется после вызова render, который вы по какой-то неясной причине хотите избежать. 
Вот два варианта решения:
1. До загрузки данных возвращать в render null или прелоадер.render() {
   const { data } = this.props;

   if (!data) return null;
     
    return (
      <div>
        <FilterModels />
      </div>
    )
  }
}
2. Переместить загрузку данных в родительский компонент и отрисовывать целевой по условию:render() {
  const { filterData } = this.props;
  return (
    <Wrapper>
      {filterData  && <FilterForm data={filterData} />}
   </Wrapper>
  )
}
Загрузку по апи лучше делать в componentDidMount, и менять стэйты в нем, об этом можно почитать в документации https://reactjs.org/docs/react-component.html#comp... . componentWillMont уже является deprecated, вместо него можно все выполнять в конструкторе (дифанить стэйты и биндить функции). Логи выполняются правильно. Если бы ты прокидывал пропсы в компонент и они бы изменились, то 3 выполнилось бы ещё раз. Если бы отрисовка компонента ожидала загрузку по апи, то мы бы долго ждали пока появится компонент. Компонент появляется без задержки, просто потом перерисовывается, если меняются состояния, которые он использует