What are the three main phases of the React component lifecycle?

The three phases are: 1. Mounting (when a component is created and inserted into the DOM), 2. Updating (when props or state change, causing a re-render), and 3. Unmounting (when a component is removed from the DOM).

Which lifecycle method is invoked immediately after a component is mounted into the DOM?

In class components, 'componentDidMount()' is invoked. In modern functional components, 'useEffect(fn, [])' with an empty dependency array serves the exact same role.

What is the equivalent of componentWillUnmount in functional components?

The cleanup function returned by useEffect (return () => { ... }) executes right before the component is unmounted from the DOM.

React Component Lifecycle: Mounting, Updating & Unmounting

Every React component undergoes a continuous lifecycle from its creation in memory to its destruction when the user navigates away. Understanding lifecycle phases is one of the most frequently asked questions in university BCA/CS exams and technical job interviews.

The 3 Lifecycle Phases

Phase	Class Lifecycle Methods	Modern Functional Hooks Equivalent
1. Mounting (Born into DOM)	• `constructor()` • `render()` • `componentDidMount()`	• Function body executes • Return JSX • `useEffect(() => { ... }, [])`
2. Updating (Props/State change)	• `shouldComponentUpdate()` • `render()` • `componentDidUpdate()`	• `React.memo` (skips render) • `useEffect(() => { ... }, [dependencies])`
3. Unmounting (Removed from DOM)	• `componentWillUnmount()`	• `useEffect(() => { return () => cleanup(); }, [])`

Class Lifecycle Example (College Syllabus Reference)

import React, { Component } from 'react';

class LifecycleLogger extends Component {
  componentDidMount() {
    console.log('1. componentDidMount: DOM is ready; start API calls.');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('2. componentDidUpdate: Component received new data.');
  }

  componentWillUnmount() {
    console.log('3. componentWillUnmount: Component about to be destroyed.');
  }

  render() {
    return <h3>Component Lifecycle in Action</h3>;
  }
}