What are React component lifecycles? Explain useEffect hook. React component lifecycles क्या हैं? useEffect hook को explain करें।

Lifecycle methods are special methods in React that run at certain times during a component's life. In functional components, useEffect hook replaces lifecycle methods.

// useEffect hook (Functional components)
import React, { useEffect, useState } from 'react';

function Component() {
    const [data, setData] = useState(null);
    
    // Runs after every render
    useEffect(() => {
        console.log('Component rendered');
    });
    
    // Runs only once (componentDidMount)
    useEffect(() => {
        console.log('Component mounted');
        fetchData();
    }, []);
    
    // Runs when dependencies change
    useEffect(() => {
        console.log('Count or name changed');
    }, [count, name]);
    
    // Cleanup function (componentWillUnmount)
    useEffect(() => {
        const timer = setInterval(() => {
            console.log('Timer running');
        }, 1000);
        
        // Cleanup
        return () => clearInterval(timer);
    }, []);
    
    return <div>{data}</div>;
}

// Class component lifecycle
class Component extends React.Component {
    componentDidMount() {
        console.log('Component mounted');
        this.fetchData();
    }
    
    componentDidUpdate(prevProps, prevState) {
        console.log('Component updated');
        if (prevProps.id !== this.props.id) {
            this.fetchData();
        }
    }
    
    componentWillUnmount() {
        console.log('Component will unmount');
    }
    
    render() {
        return <div>Content</div>;
    }
}

// useEffect dependency array
// No dependency array: runs after every render
useEffect(() => {
    console.log('Run after every render');
});

// Empty dependency array: runs once on mount
useEffect(() => {
    console.log('Run once on mount');
}, []);

// With dependencies: runs when dependencies change
useEffect(() => {
    console.log('Run when count changes');
}, [count]);

// Multiple useEffect hooks
function App() {
    useEffect(() => {
        // Handle one concern
    }, [dependency1]);
    
    useEffect(() => {
        // Handle another concern
    }, [dependency2]);
}