react - ReactJS Component Life Cycle - react js - reactjs



Lifecycle Methods

  • The component Life cycle has different types of methods:
learn react js - react js tutorial - react js - components life cycle -  react js programs

ComponentWillMount

  • componentWillMount is executed before rendering, on both server and client side.
  • This method is called right before React unmounts the component and does its cleanup.
  • As with other operations, React recursively unmounts the children.
  • Finally, React removes the nodes from the DOM and the component lifecycle is complete.
learn reactjs tutorial - reactjs component lifecycle - reactjs example
learn reactjs tutorial -
reactjs component lifecycle
- reactjs example - react tutorial - reactjs - react
learn react js - react js tutorial - react js componentwillmount -  react js programs
Article tag : react , react native , react js tutorial , create react app , react tutorial , learn react

componentDidMount

  • componentDidMount is executed after first render only on the client side.
  • This is where AJAX requests and DOM or state updates should occur.
  • This method is also used for integration with other JavaScript frameworks and any functions with delayed execution like setTimeoutor setInterval.
  • We are using it to update the state so we can trigger the other lifecycle methods.
learn react js - react js tutorial - react js componentDidMount -  react js programs

ComponentWillReceiveProps

  • componentWillReceiveProps is invoked as soon as the props are updated before another render is called.
  • We triggered it from setNewNumber when we updated the state.
  • This is called when a parent component is re-rendered (or ReactDOM.render is called).
  • This is where you update state that is derived from changes in props.
learn react js - react js tutorial - react js componentWillReceiveProps.png -  react js programs

ShouldComponentUpdate

  • shouldComponentUpdate should return true or false value. This will determine if component will be updated or not.
  • This is set to trueby default. If you are sure that component doesn't need to render after state or props are updated, you can return false value.
  • Before continuing with the update, React will call this optional method to check whether it should continue with the update.
  • By returning false here, the update loop for this instance ends early and all the remaining steps are skipped.
  • This is a key hook to making your apps more performant
Article tag : react , react native , react js tutorial , create react app , react tutorial , learn react

ComponentWillUpdate

  • componentWillUpdate is called just before rendering. This method is called right before the update call to render.
  • There is nothing different about this render call compared to the call for the initial render.
  • This point is very important to React.
  • Your render function should not differentiate whether this is the initial render or an update.
  • This is the heart of React takes render's return value and compares it to the return value last time render was called and decides what updates to make, if any.
  • The reconciliation process that we'll dive into next chapter.
  • After reconciliation, React will recursively mount, update, and unmount child components as needed.
  • Once the process resolves to base virtual DOM components, React updates the actual DOM

ComponentWillUnmount

  • componentWillUnmount is called after the component is unmounted from the dom. We are unmounting our component in main.js.
  • In our example we are setting initial state in constructor function.
  • The setNewnumber is used to update the state.
  • All the lifecycle methods are inside Content component.
learn react js - react js tutorial - react js componentWillUnmount -  react js programs
Article tag : react , react native , react js tutorial , create react app , react tutorial , learn react

App.jsx

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 0
      }

      this.setNewNumber = this.setNewNumber.bind(this)
   };

   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }

   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}

class Content extends React.Component {

   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }

   componentDidMount() {
      console.log('Component DID MOUNT!')
   }

   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }

   shouldComponentUpdate(newProps, newState) {
      return true;
   }

   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }

   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }

   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }

   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}

export default App;
click below button to copy the code. By reactjs tutorial team

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);
click below button to copy the code. By reactjs tutorial team

Output

learn reactjs tutorial - reactjs component lifecycle - reactjs example
learn reactjs tutorial -
reactjs component lifecycle
- reactjs example - react tutorial - reactjs - react
  • Only componentWillMount and componentDidMount willbe logged in console since we didn't update anything yet.
Component WILL Mount!
Component DID Mount!
  • When we click INCREMENT button, the update will occur and other lifecycle methods will be triggered.
Component WILL RECIEVE PROPS!
Component WILL UPDATE!
Component DID UPDATE!
  • After ten seconds, the component will unmount and the last event will be logged in console.
Component WILL UNMOUNT!

Related Searches to ReactJS - Component Life Cycle