In Functional Components

ကျတော်တို့က lifecycle method တွေကို ကျတော်တို့က Class Component မှာပဲ အသုံးပြုလို့ရခဲ့ပါတယ်

အဲဒါကို ကျတော်တို့ကို react ကနေပြီးတော့ lifecycle method တွေနဲ့ တူတဲ့ react hook လေးတခု ကို

release လုပ်ပေးခဲ့ပါ တယ် အဲဒါက useEffect hook ပဲဖြစ်ပါတယ် အဲကောင်ကို ကျတော်တို့က

တော်တော်လေးအသုံး များတဲ့ hook အနေနဲ့လည်း သတ်မှတ်ပေးလို့ရပါတယ်ဘာလို့ဆိုတော့ သူက

browser side effect တွေကို အသုံးပြုရမှာ တော်တော်လေး အသုံးဝင်တာမလို့ပါ

ကျတော်တို့ အရင်ဆုံး ကုဒ်လေးတွေကို ရေးလိုက်ကြရအောင်ပါ

import { useEffect } from 'react'

function UseEffectHook () {
    useEffect(()=>{
        console.log("useEffect hook is start")
    })
    return(
        <div>UseEffectHook</div>
    )
}
export default UseEffectHook

ဒီနေရာမှာ ကျတော်က naming system တွေကို နားလည်လွယ်စေချင်တဲ့သဘောအနေနဲ့ component တွေကို ဒီလိုလေး

တွေရေးလိုက်တာပါ ဒီဟာကို စာဖတ်တဲ့သူတွေ များအနေနဲ့ နားလည်ပေးကြပါဗျာ

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

အလုပ်လုပ်ပေးသွားတာကိုမြင်သွားပါလိမ့်မယ်

ကျတော်တို့က useEffect hook လေးကို တချက်ရှင်းပြပေးမယ်ဗျ အဲကောင်က

ဘယ်လိုမျိုးအလုပ်လုပ်ပေးတာလည်းဆို‌တော့ သူ့မှာ က parameter ၂ခုကို လက်ခံပေးတယ်

ပထမ တစ်ခုက callback function ဖြစ်ပြီးတော့ နောက်တစ်ခုက dependencies array လေးပါပဲ

အဲဒါတွေက ဘယ်လိုမျိုးအလုပ်လုပ်တာလည်းဆိုတော့ component တခုက browser dom ပေါ်ကို စပြီးတော့

render ဖြစ်သွားတာနဲ့ callback လေးက အလုပ်လုပ်တာပါ

ပြီးတော့ အဲ callback လေးကပဲ state ကို change လုပ်တဲ့အခါမှာ ပြန်အလုပ်လုပ်ပေးသွားတာပါ

ကျတော်တို့ ဘယ်လိုမျိုးရေးကြမလဲဆိုတော့

import { useEffect , useState } from 'react'

function UseEffectHook () {
    const [ count , setCount ] = useState(0)
    useEffect(()=>{
        console.log("useEffect hook is start")
    })
    return(
        <div>
            <h2>Count - {count}</h2>
            <button onClick={()=>{
                setCount(prev => prev + 1 )
            }> Increase </button>
        </div>
    )
}
export default UseEffectHook

အဲလိုလေး ရေးပြီးတော့ ကျတော်တို့ browser မှာသွားစမ်းကြည့်တဲ့အခါမှာ

ဒီလိုလေးအလုပ်လုပ်တာကိုမြင်ရပါလိမ့်မယ်

ပြီးတော့ ကျတော်တို့က update အတွက်လည်းအလုပ်လုပ်ပေးတယ်ဆိုတော့ သူ့မှာ unmounting

ကိုလည်းအလုပ်လုပ်ပေးပါတယ် အဲဒါက ဘယ်လိုရေးရတာလည်းဆိုတော့ callback function တခု

ကို ကျတော်တို့ က return ပြန်ပေးလိုက်ရတာပါ

ဘယ်လိုရေးလို့ရတာလည်းဆိုတော့

import { useEffect , useState } from 'react'

function UseEffectHook () {
    const [ count , setCount ] = useState(0)
    const resizeHandler = () => {
        console.log("resizing")
    }
    useEffect(()=>{
        window.addEventListener("resize" , resizeHandler )
        console.log("useEffect hook is start")
        return () => {
            window.removeEventListener("resize" , resizeHandler )
        }
    })
    return(
        <div>
            <h2>Count - {count}</h2>
            <button onClick={()=>{
                setCount(prev => prev + 1 )
            }> Increase </button>
        </div>
    )
}
export default UseEffectHook

ဒီလိုလေးရေးပြီးသွားရင်ကျတော်တို့ခုနက show component A ထဲမှာ သွားထည့်ပြီးတော့ စမ်းကြည့်လို့ရပါတယ်

ကျတော်တို့ browser မှာသွားကြည့်ရင် ဒီလိုလေး မြင်ရပါလိမ့်မယ်