ReactJs Component Life Cycle - Creation/Update

Creation:

constructor() // Call super(props), Do: Set up State, Don't: Cause Side-Effects

getDerivedStateFromProps() // Do: Sync state, Don't: Cause Side-Effects

render() // Prepare & Structure JSX Code

Render Child Components //

componentDidMount() // Do: Cause Side-Effects, Don't: Update State (triggers re-render)

Update:

getDerivedStateFromProps(props, state) // Do: Sync state to props, Don't: Cause Side-Effects

shouldComponentUpdate(nextProps, nextState) // Do: Decide whether to continue or not, Don't: Cause side-effects

render() // Prepare & Structure JSX Code

Render Child Components //

getSnapshotBeforeUpdate(prevProps, prevState) // Do: Last minute DOM ops, Dont: Cause side-effects

componentDidUpdate() // Do: Cause Side-Effects, Don't: Update State (triggers re-render)