Mounting:

Thứ tự các methods được gọi khi 1 instance của component được tạo và thêm vào DOM:

constructor()

=> should not call setState() inside this

=> Tránh copy props vào trong state

// don’t do this

this.state = { color: props.color }

static getDerivedStateFromProps(props, state)

method này được gọi ngay trước khi method render được gọi đến.

render()

componentDidMount()

=> Nếu ứng dụng cần load data từ server, nên gọi hàm load data ở đây.

Updating:

Khi props hoặc state thay đổi, một update view sẽ được thực hiện. Thứ tự các methods sau sẽ được gọi khi component được re-rendered:

static getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

Unmounting:

componentWillUnmount()

Method này sẽ được gọi ngay trước khi component bị unmount và destroy. Đây là nơi thích hợp để thực hiện việc cleanup, như invalidating timers, huỷ network request, hoặc huỷ subscriptions.

Không nên gọi setState() trong method này vì component sẽ không thể re-render lại được.

Error handling:

Khi có lỗi xảy ra trong quá trình rendering, hoặc lỗi trong constructor của bất kỳ child component nào thì method dưới đây sẽ được gọi:

componentDidCatch()

Lifecycle methods diagram: