React Lifecycle (Outlined Here)

• Split into several phases:

  • Mounting: Insertion into DOM. Events happen in order:

    • constructor - calls component before mounting; assigns state

    • getDerivedStateFromProps -

    • render - required method for class components. Does not modify state.

    • componentDidMount - called after mounting; used for network dependencies, DOM initialization

  • Updating: Rerendering due to state changes or component updates. Events happen in order:

  • getDerivedStateFromProps

  • shouldComponentUpdate - can be set to false to prevent re-renders on state change.

  • render - (see above)

  • getSnapshotBeforeUpdate -

  • componentDidUpdate - similar to componentDidMount, used for network involvement or other dependencies.

  • UNSAFE_componentWillUpdate

  • UNSAFE_componentWillReceiveProps

  • Unmounting: Component removal. Only event is componentWillUnmount

React State Vs Props (Explained Well Here)

Props

• Passed into a component from outside

• Unchanged by component itself

State

• Updated within component

• Trigger re-rendering (by default) on changes in state

• Can store changable version of data (examples– user data, counters, dynamic displays)

Things I want to know more about

• performance, longevity, and security advantages/drawbacks of React components & related methods compared to vanilla JS & HTML DOM manipulation