Answers for "componentdidmount react"

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]);

react native class component constructor

import React from 'react';  
import { View, TextInput } from "react-native";

class App extends React.Component {  
  constructor(props){  
    super(props);  
    this.state = {  
         name: "" 
      }  
    this.handleChange = this.handleChange.bind(this);  
  }
  handleChange(text){
    this.setState({ name: text })
    console.log(this.props);  
  }  
  render() {  
    return (  
    <View>
      <TextInput 
      	value={this.state.name} 
  		onChangeText={(text) =>this.handleChange(text)}
      />
    </View>  
  }  
}  
export default App;

componentDidUpdate

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

componentdidmount

import React, { Component } from 'react';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      data: 'Jordan Belfort'
    }
  }

  getData(){
    setTimeout(() => {
      console.log('Our data is fetched');
      this.setState({
        data: 'Hello WallStreet'
      })
    }, 1000)
  }

  componentDidMount(){
    this.getData();
  }

  render() {
    return(
      <div>
      {this.state.data}
    </div>
    )
  }
}

export default App;

USE OF COMPONENTDIDMOUNT()

// good place to call setState here

componentDidMount(){
  this.setState({
    message: 'i got changed',
  });
}

---

// or to make request to the server

componentDidMount() {
    fetch('https://api.mydomain.com')
      .then(response => response.json())
      .then(data => this.setState({ message: data.message }));
  }

shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState) {
  return true;
}