1. methods that are invoked in series when a com‐ ponent is mounted or updated
2. Mounting lifecycle consists of methods that are invoked when a component is mounted or unmounted
   • constructor(props), the constructor is where the state is initialized
   • componentWillMount(), is invoked before the DOM is rendered and can be used to initialize third-party libraries, start animations, request data, or perform any additional setup that may be required before a component is rendered
   • render()
   • componentDidMount(), is invoked just after the component has rendered, is another good place to make API requests, initialize any third-party JavaScript that requires a DOM, start background processes like inter‐ vals or timers
   • componentWillUnmount(), is invoked just before the component is unmounted, any processes started in componentDidMount or componentWillMount can be cleaned up
3. Updating lifecycle is a series of methods that are invoked when a component’s state changes or when new properties are received from the parent, updating lifecycle kicks off every time setState is called
   • componentWillReceiveProps(nextProps), new properties have been passed to the component, is the only method where setState can be called
   • shouldComponentUpdate(nextProps, nextState), a predicate that can call off the update
   • componentWillUpdate(nextProps, nextState), invoked just before the component updates
   • componentDidUpdate(prevProps, prevState), invoked just after the update takes place, after the call to render

import React from 'react';
import ReactDOM from 'react-dom';
import fetch from 'isomorphic-fetch'
 
class PeopleList extends React.Component {
	constructor(props) { 
		super(props)
		this.state = { data: [],
		loaded: true,
		loading: false }
	}
 
	componentDidMount() { 
		//this.setState({loading:true}) 
		fetch('https://randomuser.me/api/?results=100')
			.then(response => response.json()) 
			.then(obj => obj.results) 
			.then(data => this.setState({
				loaded: true, 
				loading: false, data
		})) }
 
	render() {
		const { data, loading } = this.state 
		return (loading) ?
        		<div>Loading...</div> :
        		<ol className="people-list">
				{data.map((person, i) => {
					const {first, last} = person.name 
					return <li key={i}>{first} {last}</li>
				})}
			</ol> 
	}
}
 
ReactDOM.render(<PeopleList />, document.getElementById('root'));