React most commonly used lifecycle methods

React most commonly used lifecycle methods which we will find most commonly in project development.As we have seen in the last post we have seen lifecycle states mounting ,updating and unmounting.

React most commonly used lifecycle methods

React most commonly used lifecycle methods

render():

  • render() required in class component
  • When render method is called it always examines the this.props and this.state
  • render method returns data of following types

a.React Elements: Created through JSX(Javascript and XML)
b.Arrays and fragments: Return multiple elements from render
c. Portals:render children into a different DOM subtree
d.String and numbers : Rendered as text node
e.Booleans or null : Render Nothing

  • It doesn’t modify component state.

constructor():

  • We dont bind the state or function then we dont need to write the constructor function.
  • The constructor is always called before component is mounted.
  • When implementing constructor for React.Component subclass then super(props) should be called before any statement Otherwise this.props will be undefined.
  • React constructor are used for two purposes
  1. Locale stage initialization with this.state
  2. Binding event handler Methods this.methodname=this.methodname.bind(this);

componentDidMount():

  • componentDidMount() is invoked immediately after a component is mounted (inserted into the tree).
  • It is best way to load data on before browser update the screen
  • It has some performance issues.
  • It is available inside the classes

componentDidUpdate():

  • componentDidUpdate() is invoked immediately after updating occurs.
  • We can setState immediately after this method but it should be used with precautions as should be in condition So that it should not go in infinite loop

componentWillUnmount():

  • This method is invoked immediately before component is unmounted.
  • The main purpose of this method is perform necessary cleanup like invadating timers,cancelling network requests.

Leave a Reply

Your email address will not be published. Required fields are marked *