React-native life cycle

React-native has its own life cycle, to learn React-native life cycle, we need to understand inbuild methods of React-native, these methods are divided into four types:

1. Mounting methods

2. Updating methods

3. Unmounting methods

4. Error handling methods

Let’s start with Mounting methods

1. Mounting methods:

There are 4 methods in Mounting phase

So as we see in the above diagram, we react-native application starts 1st constructor method called

1. constructor(props)

This method initializes our component with an initial state, not UI rendered in this method, only initialization will take place phase, you can define a state in this method, also props of the component are passed as an argument

constructor(props){
     super(props);
     this.state={
           data: null
     };
}

This will be the initial data that we can use in other methods, we will update later

2. componentWillMount()

This method will be called just after the constructor call, and once before rendering components for the first time, in this method mostly used to call web APIs and web services

componentWillMount(){
     fetch('http://product/getData')
     .then(res=>res.json()) 
     .then(res=>this.setState({
           data: res
     });
}

3. render()

This method is called immediately after componentWillMount() called, this method return react-native component i.e. JSX element as follows:

render(){
    return(
      <View>
            <Text>{this.state.data.title}</Text>
      </View>
 )
};

4. componentDidMount()

This method called once after the react-native component has finish rendering, you can call API here also and update the state with response result this will refresh ui, update any state value will revoke previous render method and reflect changes on the screen

componentDidMount(){
  fetch('http://product/getData') 
  .then(res=>res.json()) 
  .then(res=>this.setState({ data: res, data: changedObject });    
}

2. Updating methods:

After mount phase App will go in updating phase in this phase components will wait for stats and props changes

1. componentWillReceiveProps(nextProps)

This method called when the parent of a component has passed new props or change parent props, i.e. after change detected this method will first call

componentWillReceiveProps(nextProps) {
    this.setState({
      data: nextProps.myProp + "new data"
    });
  }

2. shouldComponentUpdate(nextProps)

This method called every time just before the component re-rendering process, we can stop re-rendering by passing false like below:

shouldComponentUpdate(nextProp, nextState) { 
    console.log(nextProp, nextState); 
    return false;   
  }

3. componentWillUpdate()

This method called when shouldComponentUpdate(nextProps) return true, also we can do extra processing on data in  this method

componentWillUpdate(nextProp, nextState) { 
    console.log('+++++++componentWillUpdate Called', nextProp, nextState); 
}

4. componentDidUpdate()

This method called after re-rendering of component complete, this method has it’s two arguments

1. prevProps: previous properties object.
2. prevState: previous state object.

3. Unmounting methods:

This method called when the component is removed

componentWillUnmount() {
     this.data= this.data.destroy();
    }

4. Error handling method :

1. componentDidCatch()

This method helps the user to find an error in code and catch error with the error message

componentDidCatch(error, info){
  console.log('+++++++componentDidCatch Called', error, info); 
}