Потому что библиотека не ожидает возвращаемое значение в 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>
)
}
Адаптивный дизайн имеет заранее несколько версий сайта для разных размеров (320px, 760px, 1024px, etc.), которые не подгружают лишних элементов, как респонсив, если их не будет на странице.