# 18) Component Lifecycle

1.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">Functional Component Lifecycle Phases</mark>**  
    In modern React, **functional components don’t have lifecycle *methods*** like class components. Instead, lifecycle behavior is handled using **hooks**, mainly `useEffect`.  
    Even in functional components, the lifecycle still conceptually has 3 phases,  
    i) Mounting (Component created)  
    ii) Updating (State/props change)  
    iii) Unmounting (Component removed)
    
    In React functional component the useEffect hook is use as a Lifecycle Controller.  
    The `useEffect` **hook** replaces,  
    i) `componentDidMount`  
    ii) `componentDidUpdate`  
    iii) `componentWillUnmount`  
    Depending on how you use it, it behaves differently.
    
2.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">Lifecycle Mapping with Examples</mark>**  
    **i) Mounting Phase (componentDidMount)**  
    Runs only once when component mounts  
    It is equivalent to componentDidMount()
    
    ```javascript
    import { useEffect } from "react";
    
    const App = () => {
      useEffect(() => {
        console.log("Component Mounted");
      }, []); // empty dependency array, runs only once
    
      return <h1>Hello World</h1>;
    }
    ```
    
    **ii) Updating Phase (componentDidUpdate)**  
    Runs when dependency changes  
    It is equivalent to componentDidUpdate(prevProps, prevState)
    
    ```javascript
    import { useState, useEffect } from "react";
    
    const Counter = () => {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        console.log("Count Updated:", count);
      }, [count]); // runs only when count changes
    
      return (
        <button onClick={() => setCount(count + 1)}>
          Count: {count}
        </button>
      );
    }
    ```
    
    **iii) Unmounting Phase (componentWillUnmount)**  
    It uses Cleanup function  
    It is equivalent to componentWillUnmount()
    
    ```javascript
    import { useEffect } from "react";
    
    const Timer = () => {
      useEffect(() => {
        const interval = setInterval(() => {
          console.log("Running...");
        }, 1000);
    
        return () => {
          clearInterval(interval);
          console.log("Component Unmounted");
        };
      }, []);
    
      return <h1>Timer Running</h1>;
    }
    ```