Answers for "ComponentWillMount in react"

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.')
  }
}

componentwillreceiveprops hooks

SomeComponent (props) => {

    useEffect( () => {
        console.log('someProp updated');
    }, [props.someProp])


    return <div>Hi {props.someProp}</div>
}

shouldcomponentupdate default return

By default, shouldComponentUpdate returns true, but you can override it to return false for cases that you do not want a re-render.

componentwillreceiveprops hooks

const { useState, useEffect, useMemo } = React;

function App() {
  const [count, setCount] = useState(50);

  useEffect(() => {
    setTimeout(() => {
      setCount(150);
    }, 2000);
  }, []);

  return <DisplayCount count={count} />;
}

function DisplayCount(props) {
  const count = useMemo(() => props.count > 100 ? 100 : props.count, [props.count]);

  return <div> {count} </div>;
}

ReactDOM.render(<App />, document.getElementById("root"));