You get a bonus - 1 coin for daily activity. Now you have 1 coin

What are the React lifecycle methods? in REACT

Practice



React 16.3+

  • getDerivedStateFromProps: Called immediately before
    render()
    and invoked on every render. It exists for the rare use cases where you need derived state. It is worth reading if you need derived state .
  • componentDidMount: runs after the first render, and this is where all AJAX requests, DOM or state updates should happen, and where event listeners should be set up.
  • shouldComponentUpdate: Determines whether the component will update or not. By default it returns
    true
    If you are sure the component should not re-render after a state or props update, you can return a false value. This is a great place to improve performance, since it lets you prevent a re-render when the component receives a new prop.
  • getSnapshotBeforeUpdate: Runs immediately before the rendered output is committed to the DOM. Any value returned from it will be passed to
    componentDidUpdate()
    This is useful for capturing information from the DOM, i.e. the scroll position.
  • componentDidUpdate: it is mainly used to update the DOM in response to prop or state changes. It will not fire if
    shouldComponentUpdate()
    returns
    false
    .
  • componentWillUnmount It will be used to cancel any outgoing network requests or to remove all event listeners associated with the component.
 

Before 16.3

  • componentWillMount: runs before rendering and is used for application-level configuration in the root component.
  • componentDidMount: runs after the first render, and this is where all AJAX requests, DOM or state updates should happen, and where event listeners should be set up.
  • componentWillReceiveProps: Runs when a particular prop is updated in order to trigger state transitions.
  • shouldComponentUpdate: Determines whether the component will update or not. By default it returns
    true
    If you are sure the component should not re-render after a state or props update, you can return a false value. This is a great place to improve performance, since it lets you prevent a re-render when the component receives a new prop.
  • componentWillUpdate: Runs before the component is re-rendered, when there are props and state changes confirmed by
    shouldComponentUpdate()
    which returns true.
  • componentDidUpdate: it is mainly used to update the DOM in response to prop or state changes.
  • componentWillUnmount: will be used to cancel any outgoing network requests or to remove all event listeners associated with the component.

Comments

To leave a comment

If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Lectures and tutorial on "Scripting client side JavaScript, jqvery, BackBone"

Terms: Scripting client side JavaScript, jqvery, BackBone