Component Lifecycle - Creation

Call super(props)
Default ES6 class
constructor(props) DO: Set up State
Feature
DON‘T: Cause Side-Effects

DO: Sync state

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

Prepare & Structure your

render()
JSX Code

Render Child Components

DO: Cause Side-Effects

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