What are the lifecycle methods of React?

- **componentWillMount:** Executed before rendering and is used for App level configuration in your root component.
- **componentDidMount:** Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur.
- **componentWillReceiveProps:** Executed when particular prop updates to trigger state transitions.
- **shouldComponentUpdate:** Determines if the component will be updated or not. By default it returns `true`. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop.
- **componentWillUpdate:** Executed before re-rendering the component when there are props & state changes confirmed by `shouldComponentUpdate()` which returns true.
- **componentDidUpdate:** Mostly it is used to update the DOM in response to prop or state changes.
- **componentWillUnmount:** It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.

React 16.3+

- **getDerivedStateFromProps:** Invoked right before calling `render()` and is invoked on _every_ render. This exists for rare use cases where you need a derived state. Worth reading [if you need derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html).
- **componentDidMount:** Executed after first rendering and where all AJAX requests, DOM or state updates, and set up event listeners should occur.
- **shouldComponentUpdate:** Determines if the component will be updated or not. By default, it returns `true`. If you are sure that the component doesn't need to render after the state or props are updated, you can return a false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives a new prop.
- **getSnapshotBeforeUpdate:** Executed right before rendered output is committed to the DOM. Any value returned by this will be passed into `componentDidUpdate()`. This is useful to capture information from the DOM i.e. scroll position.
- **componentDidUpdate:** Mostly it is used to update the DOM in response to prop or state changes. This will not fire if `shouldComponentUpdate()` returns `false`.
- **componentWillUnmount** It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.

import React, { Component } from 'react';

export class OrderTracker extends Component<{ orderId: string }, { status: string }> {
  state = { status: 'pending' };
  private abortController?: AbortController;

  componentDidMount() {
    this.fetchOrderStatus(this.props.orderId);
  }

  componentDidUpdate(prevProps: { orderId: string }) {
    if (prevProps.orderId !== this.props.orderId) {
      this.fetchOrderStatus(this.props.orderId);
    }
  }

  componentWillUnmount() {
    this.abortController?.abort();
  }

  fetchOrderStatus = async (id: string) => {
    this.abortController = new AbortController();
    try {
      const res = await fetch(`/api/orders/${id}`, { signal: this.abortController.signal });
      const data = await res.json();
      this.setState({ status: data.status });
    } catch (e) {
      // Aborted request handled gracefully
    }
  };

  render() {
    return <div>Order #{this.props.orderId} Status: {this.state.status}</div>;
  }
}