What are the different phases of component lifecycle?

1. **Mounting:** The component is ready to mount in the browser DOM. This phase covers initialization from `constructor()`, `getDerivedStateFromProps()`, `render()`, and `componentDidMount()` lifecycle methods.

2. **Updating:** In this phase, the component gets updated in two ways, sending the new props and updating the state either from `setState()` or `forceUpdate()`. This phase covers `getDerivedStateFromProps()`, `shouldComponentUpdate()`, `render()`, `getSnapshotBeforeUpdate()` and `componentDidUpdate()` lifecycle methods.

3. **Unmounting:** In this last phase, the component is not needed and gets unmounted from the browser DOM. This phase includes `componentWillUnmount()` lifecycle method.

It's worth mentioning that React internally has a concept of phases when applying changes to the DOM. They are separated as follows

4. **Render** The component will render without any side effects. This applies to Pure components and in this phase, React can pause, abort, or restart the render.

5. **Pre-commit** Before the component actually applies the changes to the DOM, there is a moment that allows React to read from the DOM through the `getSnapshotBeforeUpdate()`.

6. **Commit** React works with the DOM and executes the final lifecycles respectively `componentDidMount()` for mounting, `componentDidUpdate()` for updating, and `componentWillUnmount()` for unmounting.

React 16.3+ Phases (or an [interactive version](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/))

![phases 16.4+](/images/phases16.4.png)

Before React 16.3

![phases 16.2](/images/phases.png)

import React, { Component, useEffect } from 'react';

// Class Component Lifecycle Across Phases
class LifecycleDemo extends Component {
  // 1. Mounting
  constructor(props: any) {
    super(props);
    console.log('Mounting: Constructor called');
  }

  componentDidMount() {
    console.log('Mounting: Component mounted to DOM');
  }

  // 2. Updating
  componentDidUpdate(prevProps: any, prevState: any) {
    console.log('Updating: Component updated after prop/state change');
  }

  // 3. Unmounting
  componentWillUnmount() {
    console.log('Unmounting: Cleaning up timers and listeners');
  }

  render() {
    return <div>Lifecycle Phases Demonstration</div>;
  }
}

// Modern Functional Lifecycle using useEffect
export function FunctionalLifecycleDemo({ dataId }: { dataId: string }) {
  useEffect(() => {
    console.log('Mounted / Re-subscribed for dataId:', dataId);
    return () => {
      console.log('Unmounting / Cleanup before re-run');
    };
  }, [dataId]);

  return <div>Hooks Lifecycle Demo</div>;
}