React Component Lifecycle and Methods

 

Overview

• Each component has several “lifecycle methods” that you can override to run code at particular times in the process.

Initializing

• props
• state

Mounting

• constructor()
• static getDerivedSatteFromProps()
• render()
• componentDidMount()

Updating

• static getDerivedSatteFromProps()
• render()
• componentDidUpdate()
• shouldComponentUpdate()
• getSnapshotBeforeUpdate()

Unmounting

• componentWillUnmount()

Error Handling

• static getDerivedStateFromError()
• componentDidCatch()

Life Cycle Methods

Constructor()

• The constructor() method is called before anything else, when the component is initiated, and it is the natural place to set up the initial state and other initial values.
• If you don't initialized state and you don't blind methods, you don't need to implement constructor for your React component.
• The constructor() method is called with the props, as arguments, and you should always start by calling the super(props) before anything else.
• we don't use setState() method in the constructor() function. When use setState(), then apart from assigning to the object state react also re-renders the component and all it's children.

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

render()

The render() method is the only required method in class component.
render() is the most used method for any React powered component which return a JSX with backend data.
It is seen as a normal function.
The render() function should be pure, meaning that it does not modify component state.
class Header extends React.Component(props) {
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ComponentDidMount()

It is invoked immediately after a component is mounted.
ComponentDidMount() method is the perfect place, where we can call the setState() method to change the state of our application and render()the update data loaded JSX.
we use setTimeOut() method and fetch data.
componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}
ComponentWillMount()
It is invoked immediately before a component is unmounted and destroyed.
Should not call setState() method in ComponentWillMount() method. because this method will never be re-rendered.
class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}
ShouldComponentUpdate()
It is invoked before rendering when new props and state are being received.
In the shouldComponentUpdate() method you can return a Boolean that specifies whether React should continue with the rendering or not.
 Default it is true.
This method is not called for the initial render or when forceUpdate() is used.
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
}
ComponentDidUpdate()
It is invoked immediately after updating occurs.
This method is not called for the initial render.
call setState() immediately in componentDidUpdate() but note that it must be wrapped.
ComponentDidUpdate() will not be invoked if shouldComponentUpdate() return false.
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
}
static getDerivedStateFromError()
It is invoked after an error has been thrown by a descendant component.
It receives the error that was thrown as a parameter and should return value to update state.
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}