UseEffect Scenario Questions

1.Run only once

CODE :

import { useEffect } from "react";
function  ComponentMounted() {
    useEffect(()=> {
        console.log("Component Mounted");

    },[])
}
export default ComponentMounted;  

2.Run on every render

CODE :

import { useEffect, useState } from "react";
function Rendered() {

    const [name, setName] = useState("")

    useEffect(() => {
        console.log("Rendered");

    })


    return (

        // <>
        // <input value={name} type="text" onChange={(e)=> setName(e.target.value)}/>
        // <p>Hi welcome{name}</p>
        // </>
        <div>
            <h2>Count={count}</h2>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    )

}
export default Rendered;

3.Run when state changes

CODE :

import { useEffect, useState } from "react";
function StateChanges() {
    const [count, setCount] = useState(0)

    useEffect(() => {
        console.log("Count Changed")
    }, [count]);

    return (
        <div>
            <h2>Count={count}</h2>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    )
}

export default StateChanges;

4.Two states, One effect

CODE :

import { useEffect, useState } from "react";
function TwoStates() {
    const [count, setCount] = useState(0)
    const [name, setName] = useState("")


    useEffect(() => {
        console.log("Count Or Name Changed")
    }, [count, name]);

    return (
        <div>
            <h2>Count={count}</h2>
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={name} type="text" onChange={(e) => setName(e.target.value)} />
            <p>Hi welcome{name}</p>
        </div>
    )

}
export default TwoStates;

5.Derived Logic

CODE :

import { useEffect, useState } from "react";
function MyComponent() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count}</p>

            {count % 2 === 0 && <p>Even Number</p>}

            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    )
}
export default MyComponent;

6.API call on Mount

CODE :

import { useEffect } from "react";
function ApiCallOnmount() {
    useEffect(() => {
        fetch("https://fakestoreapi.com/products/1")
            .then((res) => res.json())
            .then((data) => console.log(data));
    }, [])
}
export default ApiCallOnmount;

7.Infinite loop trap

CODE:

import { useEffect, useState } from "react";
function LoopTrap() {

    const [count, setCount] = useState(0);
    useEffect(() => {
        setCount(count + 1)
            ;
    }, [count])

}
export default LoopTrap;

8..Fix the Infinite loop

CODE :

import { useEffect, useState } from "react";
function FixTheLoop() {

    const [count, setCount] = useState(0);
    useEffect(() => {
        setCount(count + 1)
            ;
    }, [])

}
export default FixTheLoop;

9.Document title sync

CODE :

import { useEffect, useState } from "react";
function DocTitleSync() {

    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = count;
    }, [count])

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    )

}
export default DocTitleSync;

10.Cleanup basic

CODE :

import { useEffect } from "react";
function Cleanup() {

    function handleClick() {
        console.log("Window Clicked");

    }
    useEffect(() => {
        window.addEventListener("click", handleClick)

        return () => {
            window.removeEventListener("click", handleClick)
        };
    }, []);

    return (
        <div>
            <h2>Click window</h2>
        </div>
    )

}
export default Cleanup;