What are the ways to correctly load data into a react component?

Question

JavaScript

Tell me how to load the data correctly so that the component is re-rendered after the data is loaded, without using forceUpdate and not substituting blanks into the state

import React from 'react'
import { render } from 'react-dom'
import axios from 'axios'
import "bootstrap/scss/bootstrap.scss"



class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {data:null} // неработает ошибка, нету 0 индекса
        // this.state = {data:[{title:"placeholder title"}]} // работает с такой болванкой, данные ререндятся после фетча данных
        this.loadData()
    }

    loadData(){
        axios.get('https://jsonplaceholder.typicode.com/posts')
            .then(res=>{
                console.log("axios res data: ",res.data);
                this.setState({data:res.data})
            })
    }
    render() {
        return (
            <div>
            <h4>App component</h4>
            {this.state.data[0].title}
            </div>
        )
    }
}

render( 
    <div className = "container">
        <App/>
    </div>,
    document.getElementById("root")
)

Answer 1

In general, the use of constructs like: in render is very bad style. Avoid it if possible. To make the component render the data loading field:

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>
  );
}