Using sideEffect in useEffect hook

ကျတော်တို့က useEffect hook တခုမှာ component lifecycle တွေအကုန်လုံး

အလုပ်လုပ်တာကိုနားလည်သွားမယ်လို့ထင်ပါတယ်

အဲဒီအတွက် ကျတော်တို့က first reload data ကို ယူတဲ့အခါကျရင် သူ့အထဲမှာ လာရေးလိုက်ရင်

ကျတော်တို့ လိုချင်တဲ့ data ကို ရသွားမှာပါ

ကျတော်တို့ ကုဒ်လေး နည်းနည်းလောက်ရေးလိုက်ကြရအောင်

import { useEffect , useState } from 'react'

function UseEffectHook () {
    const [ count , setCount ] = useState(0)
    const [ data , setData ] = useState([])
    const resizeHandler = () => {
        console.log("resizing")
    }
    const getData = async () =>{ // api side effect function
        const data = await fetch("https://jsonplaceholder.typicode.com/users")
        const result = await data.json();
        setData(result)
        console.log(result)
    }
    useEffect(()=>{
        window.addEventListener("resize" , resizeHandler )
        console.log("useEffect hook is start")
        getData() // api side effect function call
        return () => {
            window.removeEventListener("resize" , resizeHandler )
        }
    })
    return(
        <div>
            <h2>Count - {count}</h2>
            <button onClick={()=>{
                setCount(prev => prev + 1 )
            }> Increase </button>
        </div>
    )
}
export default UseEffectHook

ကျတော်တို့အဲလိုလေးရေးပြီးတော့ browser မှာသွားကြည့်လိုက်ရင် ကျတော်တို့ ဘာကိုမြင်ရမှာလည်းဆိုတော့

သူက ထုံးစံအတိုင်း infinite api request လုပ်နေတာကိုမြင်ရပါလိမ့်မယ် အဲဒါက

ဘာဖြစ်လို့လည်းဆိုတော့ကျတော်တို့ useEffect hook မှာက ကျတော် အစကပြောခဲ့ပါတယ် သူ့မှာ

parameter ၂ခုကို လက်ခံပေးပါတယ်ဆိုပီးတော့ တခုက callback ဖြစ်ပြီးတော့ နောက်တစ်ခုက

dependency array ဆိုပြီးတော့အဲ dependency array က ဘယ်လိုမျိုးအလုပ်လုပ်ပေးတာလည်းဆိုတော့

ကျတော်တို့ အပေါ်မှာရှင်းပြခဲ့သလိုမျိုး state တခု update လုပ်ပြီးသွားတဲ့အခါကျရင်သူက

ပြန်စစ်ပေးတယ် အဲကောင်က updated ဖြစ်နေရင် ထပ်အလုပ်မလုပ်သွားအောင် prevent အလုပ်လုပ်ပေးပါတယ်

ပြီးတော့ သူက နောက်တခု အလုပ်လုပ်ပေးပါတယ် အဲဒါက ဘာလည်းဆိုတော့ ကျတော်တို့

အဲ array ထဲကို ပြောင်းလဲ လာနိုင်ချေရှိတဲ့ state တွေကို input လုပ်ပေးထားရင်လည်း သူက အဲ

state update လုပ်တဲ့အချိန် တိုင်းမှာ ပြန်ပြီးတော့ callback ကို အလုပ်လုပ်စေပါတယ်

အဲဒီအတွက် ကျတော်တို့က useEffect တခု ဖန်တီးတဲ့အချိန်မှာ အဲ array လေးကို မမေ့ခဲ့ကြဖို့ လိုအပ်ပါတယ်

useEffect(()=>{
        window.addEventListener("resize" , resizeHandler )
        console.log("useEffect hook is start")
        getData() // api side effect function call
        return () => {
            window.removeEventListener("resize" , resizeHandler )
        }
    }, [])

ကျတော်တို့ အဲလိုမျိုး ရသွားတဲ့အချိန်မှာ ကျတော်တို့က button နိပ်လို့ count က ၁ တိုးသွားရင်

နောက်တကြိမ် ထပ် ပြီးတော့ ‌api fetch လုပ်စေချင်တယ်ဆိုရင်

ဒီလိုလေးရေးလိုက်ပါမယ်

useEffect(()=>{
        window.addEventListener("resize" , resizeHandler )
        console.log("useEffect hook is start")
        getData() // api side effect function call
        return () => {
            window.removeEventListener("resize" , resizeHandler )
        }
    },[count])
    return(
        <div>
            <h2>Count - {count}</h2>
            <button onClick={()=>{
                setCount(prev => prev + 1 )
            }> Increase </button>
        </div>
    )

အဲလိုလေး add လိုက်ပြီးတဲ့အခါကျရင် ကျတော်တို့ increase button လေးကို click လိုက်တိုင်းမှာ

useEffect hook ကနေပြီးတော့ သူ့ရဲ့ callback ထဲမှာရှိတဲ့ api request function ကို အလုပ် လုပ်ပေးနေမှာပါ

အဲလောက်ဆိုရင်တော့ ကျတော်တို့ useEffect ကို နားလည်သွားမယ်လို့ မျှော်လင့်ပါတယ်