REACT - Use Effect

    // USE EFFECT BASICS
    import React, { useState, useEffect } from "react";
    // by default runs after every re-render
    // cleanup function
    // second parameter
    const UseEffectBasics = () => {
    const [value, setValue] = useState(0);
    useEffect(() => {
    console.log("call useEffect");
    if (value > 0) {
    document.title = `New Messages(${value})`;
    }
    });
    
    console.log("render component");
    return (
    <>
        <h1>{value}</h1>
        <button className="btn" onClick={()=> setValue(value + 1)}>
            click me
        </button>
    </>
    );
    };
    
    export default UseEffectBasics;


    

    // < USE EFECTS CLEANUP
    import React, { useState, useEffect } from "react";
    
    // cleanup function
    // second argument
    
    const UseEffectCleanup = () => {
    const [size, setSize] = useState(window.innerWidth);
    console.log(size);
    const checkSize = () => {
    setSize(window.innerWidth);
    };
    
    useEffect(() => {
    window.addEventListener("resize", checkSize);
    return () => {
    window.removeEventListener("resize", checkSize);
    };
    });
    console.log("render");
    return (
    <>
        <h1>Window</h1>
        <h2>{size} px</h2>;
    </>
    );
    };
    
    export default UseEffectCleanup;


    

    // <

    

    // <

    

    // <

    

    // <

    

    // <