Skip to main content

7.08.0 Component Update Lifecycle For Props

Component Lifecycle​

2. Component Updating​

Lifecycle Update External Learning Card PDF

  1. getDerivedStateFromProps(props, state)
    update your state based on outside changes
    rarely used DO: Sync to Props DON'T: Cause Side-Effects

  2. shouldComponentUpdate(nextProps, nextState)
    May cancel updating process!
    Carefully!
    DO: Decide whether to Continue or Not
    DON'T: Cause Side-Effects

  3. render()
    Prepare & Structure your JSX Code

  4. Update Child Component Props

  5. getSnapshotBeforeUpdate(prevProps, prevState)
    rarely used
    DO: Last-minute DOM operations DON'T: Cause Side-Effects

  6. componentDidUpdate
    update done!
    DO: Cause Side-Effects DON'T: Update State (triggers re-render)