bradxr
1/3/2019 - 10:42 AM

31 - Component Lifecycle - Update

snippet.md
content_copyfile_download
  • Rendered
  • Source
  • component lifecycle for updating
  • have to differentiate between updates triggered by the parent (changing props) and internally triggered updates (changing state)
  • here we'll be focusing on triggered by parent
  • process:
    1. componentWillReceiveProps(nextProps) | DO: sync state to props | DON'T: cause side-effects
    2. shouldComponentUpdate(nextProps, nextState) | may cancel the updating process! | DO: decide whether to continue with the update or not | DON'T: cause side effects
    3. (if allowed to update) componentWillUpdate(nextProps, nextState) | DO: sync state to props | DON'T: cause side effects
    4. render() | prepare and structure your JSX code
    5. (if allowed to update) React will then update all child component props, may trigger update for child components
    6. (if allowed to update) componentDidUpdate() | DO: cause side effects | DON'T: update state (triggers re-render)