react native componentdidmount code example

Example 1: how to use componentdidmount in functional component

// passing an empty array as second argument triggers the callback in useEffect
// only after the initial render thus replicating `componentDidMount` lifecycle behaviour
useEffect(() => {
  if(!props.fetched) {
 	 props.fetchRules();
  }
  console.log('mount it!');
}, []);

// componentDidUpdate
useEffect({
	your code here
}) 

// For componentDidUpdate
useEffect(() => {
  // Your code here
}, [yourDependency]);

// For componentWillUnmount
useEffect(() => {
  // componentWillUnmount
  return () => {
     // Your code here
  }
}, [yourDependency]);

Example 2: 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 3: componentDidUpdate

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

Example 4: shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

Example 5: component did mmount

componentDidMount()

Example 6: component did mmount

componentDidUpdate(prevProps, prevState, snapshot)