Component Lifecycle – Update

DO: Sync State to Props

getDerivedStateFromProps(props, state)
DON‘T: Cause Side-Effects

DO: Decide whether to

May cancel updating shouldComponentUpdate(nextProps,
Continue or Not
process! nextState)
DON‘T: Cause Side-Effects

Prepare & Structure your

render()
JSX Code

Update Child Component Props

getSnapshotBeforeUpdate(prevProps, DO: Last-minute DOM ops

prevState) DON‘T: Cause Side-Effects

DO: Cause Side-Effects

componentDidUpdate() DON‘T: Update State
(triggers re-render)