React lifecycle methods

Sachin — Fri, 02 Sep 2022 04:43:33 +0000

Each component in react live a life - from birth to death.
Main three stages of the lifecycle of a component are:

Mounting : Birth of the component
Updating : Growth of the component
Unmounting : Death of the component

we have many method in these lifecycle, but i'm talk about four mostly used methods. These methods can only used in class components.

render()

render() {
    console.log('rendering')
    return (
        <div>
          <div>Parent Component</div>
        </div>);

         }

Other ways can be used, but this one must be declared. Our component is created at this stage and is added to the DOM. Rendering of the component to the DOM

componentDidMount()

The componentDidMount() is called after the component is rendered.


class... {
constructor(props) {
    super();

    this.state = {
        color : ''
    }
}

    componentDidMount() {
        this.setState({
            color: 'red'
        })
    }

    render() {
        <h1>I, a header element, is born! My color is {this.state.color}</h1>
    }

}

componentdidupdate()

Once the update is complete, this method is called. It accepts as input the previous props, previous state. This is an ideal location for causing side effects and making network requests for the updated props.

 componentDidUpdate(prevProps) {
        if(this.props.color !== prevProps.color) {
            console.log('component updating')
        }
    }

shouldComponentUpdate()

When state or props change, you'll want a component to re-render. You do, however, have control over this behaviour.
You can control whether the component is rerendered by returning a boolean (true or false) within this lifecycle method.

shouldComponentUpdate(){
    console.log('shouldComponentUpdate')
    return true
}

Reference links

react js

log Rocket

Batch Update

Sachin — Thu, 01 Sep 2022 06:33:03 +0000

In react 17 version, when we set multiple state in this.state .
render can run for each state when update . so , its can effect performance while working.

But after react 18 version, render can run once after all state updated.
below this code is example of render,

import React from "react";
import "./styles.css";

class batch extends React.Component {
  constructor() {
    super();
    this.state = {
      increment1: 0,
      increment2: 0
    };
  }

  bottonClick = () => {
    this.setState({
      increment1: this.state.increment1 + 1,
      increment2: this.state.increment2 + 2
    });
    console.log("render");

  };

  render() {
    return (
      <>
        <h1> batch update</h1>
        <div>increment1 : {this.state.increment1}</div>
        <div> increment2 : {this.state.increment2}</div>
        <button onClick={this.bottonClick}> increment</button>
      </>
    );
  }
}
export default batch;

Advantage

Separate changes to the state(increment1 and increment2) within the event handler (bottonClick) will result in single rendering

Disadvantage

But it doesn't work in every situation.
when an event handler that uses asynchronous operation then separate state updates will not be batched.

Helping links :
medium
and
log rocket

DEV Community: Sachin