Code 301 Class 02 Reading Notes

React lifecycle

There are three phases of the component lifecylce:

  1. Mounting; When an instance of a component is being created an inserted into the DOM it occurs during the mounting phase. Constructor, static getDerivedStateFromProps, render, comonentDidMount, and UNSAFE_componentWillMount all occur in this order during mounting.
  2. Updating; Anytime a component is updated or state changes then it is rerendered. These lifecycle events happen during updating in this order.static getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componenetDidUpdate, UNSAFE_componentWillUpdate, UNSAFE_componentWillReceiveProps
  3. Unmounting; Final phase of the lifecylce if called when a componenet is being removed from the DOM. componentWillUnmount is the only lifecylce even during this phase.

constructor() for a React component is called before it is mounted. If the component is a subclass you should call super(props), or the props will be undefined. constructors can be used to assign state using this.state or bind event handle methods to an instance.

render() is the only required method in a class component. It will examine this.props and this.state when called. The render function should not modify the component state because it would cause a lot of bugs by changing the state every time it rerenders. Should also not directly interace with the browser.

componentDidMount() This method is invoked immediately after a component is mounted. If anythig needs loading using a network requrest or initialize the DOM, it should go here.

Reading Questions

  1. Based off the diagram, what happens first, the ‘render’ or the ‘componentDidMount’? Render happens first, the React updates DOM and refs, followed by componentDidMount.
  2. What is the very first thing to happen in the lifecycle of React? An instance of a component is being created and inserted into the DOM, constructor is called.
  3. Following things in the order they happen: copnstructor, render, React Updates, componentDidMount, componenetWillUnmount.
  4. componentDidMount() This method is invoked immediately after a component is mounted. If anythig needs loading using a network requrest or initialize the DOM, it should go here.

<—BACK