which react lifecycle method to fetch data code example

Example 1: react native componentwillmount vs componentdidmount

The best place to make calls to fetch data is within componentDidMount(). 
componentDidMount() is only called once, on the client, compared to 
componentWillMount() which is called twice, once to the server and 
once on the client. It is called after the initial render when the 
client received data from the server and before the data is displayed 
in the browser.

Example 2: using componentdidmount with fetch

Component with Data
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(result => {
        this.setState({
          isLoaded: true,
          items: result
        });
      });
  }

  render() {
    const { items } = this.state;
    if (!isLoaded) {
      return <div>Loading ... </div>;
    } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.id}>
              <h3>{item.title}</h3>
              <p>{item.body}</p>
            </li>
          ))}
        </ul>
      );
    }
  }
}
Fetching Data - Ha