Advanced React

React Component Lifecycle

Mounting:

These methods are called when an instance of a component is being created and inserted into the DOM:

*constructor()
*componentWillMount()
*render()
*componentDidMount()

Updating:

An update can cause by changes to props or state. these methods are called when a component being re-render.

*componentWillReceiveProps()

componentWillReceiveProps(nextProps){
        // every time the parent component re-render the child component receive props
    }

*shouldComponentUpdate()

shouldComponentUpdate(nextProps,nextState){
        // return true || false
    }
 

*componentWillUpdate()
*render()
*componentDidUpdate()

unmounting:

this method is called when a component is being removed from the DOM.

*componentWillUnmount()

Handlling Errors:

*componentDidCatch()
this method is called for handling errors when they occur during rendering, in a lifecycle method or in the constructor of any child component

APIs:

*setState()
*forceUpdate()

Class Properties:

*defaultProps
*displayName

Instance Properties:

*props
*state

---

performance optimization:

1) you should measure it first in react application most of the optimization concerns happens during the update operation of a component.

*componentWillReceiveProps() method is not super useful for performance analysis