componentdidmount react native 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: componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  if (prevState.pokemons !== this.state.pokemons) {
    console.log('pokemons state has changed.')
  }
}

Example 3: react lifecycle example

class Test extends React.Component {
  constructor() {
    console.log('Constructor')
    super();
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    console.log("component did mount");
  }
  componentDidUpdate() {
    console.log("component did update");
  }

  onClick = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    console.log("render");
    return (
      <div>
        Hello Test
        <button onClick={this.onClick}>
      		{this.state.count}
		</button>
      </div>
    );
  }
}


//--for first time
//Constructor
//render
//component did mount
//--for any update
//render
//component did update

Example 4: lifecycle method react

INITIALIZATION= setup props and state 
MOUNTING= constructor->componentWillMount->render->componentDidMount//Birth
UPDATE= shouldComponentUpdate->componentWillUpdate->render
  		->componentDidUpdate //Growth
UNMOUNTING= componentWillUnmount //Death

Example 5: shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

Example 6: component did mmount

componentDidMount()