Какие способы правильно загрузить данные в react компонент?
Вообще использование в render конструкций типа:{this.state.data[0].title}
очень плохой стиль. По возможности избегайте его.
Чтобы компонент рендерился поле загрузки данных:render() {
  const { data } = this.state;
  const isAllDataReady = data && data.length > 0;

  return (
    <div>
       {!isAllDataReady && <Preloader />}
       {isAllDataReady && (
         <div>
           <h4>App component</h4>
           {data[0].title}
         </div>
       )}
    </div>
  );
}
render() {
  const [ post ] = this.state.data || [];

  return (
    <div>
      <h4>App component</h4>
      {post ? post.title : 'пока ничего не загрузилось'}
    </div>
  );
}