2-1-react-state-and-lifecycle.md

React | State and Lifecycle

React | 5. State and Lifecycle

About the state

// You can initialize the state in the Component's constructor
this.state = { firstname: 'Maxence', age: 25 }

// You can get a state value with "this.state" property
this.state.firstname

// You MUST set some state value with "this.setState" method
// Be careful, this opereation might be asynchronous
this.setState({firstname: 'Mickaël'})

About React Lifecycle

Mounting:

• constructor(props): Should starts with super(props); Perfect to initialize the state and binding methods
• render(): Return the JSX to display
• componentDidMount(): Perfect place to call APIs and set up any subscriptions.

Updating:

• componentWillUpdate(nextProps, nextState)
• render()
• componentDidUpdate(prevProps, prevState)

Unmounting:

• componentWillUnmount()

Error Handling:

• componentDidCatch()

Exercise

On this Codepen, by using axios, display in the App component the information from this API: https://ih-crud-api.herokuapp.com/characters/1