componentDidUpdate()

ကျတော်တို့ ဒီ method လေးက ကျတော့ ဘယ်လိုမျိုးလည်းဆိုတော့ သူက ကျတော်တို့ရဲ့ component

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

rerender လုပ်ပေးတာ ပါ

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

class LifeCycle extends Component {
    constructor(){
        super()
        console.log("constructor start")
        this.state = {
            count : 0
        }
    }
    getData = async() =>{
        const data = await fetch("https://jsonplaceholder.typicode.com/users")
        const result = await data.json()
        console.log(result)
    }
    componentDidMount(){
        this.getData()
        console.log("component life cycle start")
    }
    componentDidUpdate(){
        console.log("component state is update")
    }
    increment = () => {
        this.setState({
            count : this.state + 1
        }
    }
    render(){
    console.log("render start")
        return (
            <div>
                <h1>Count - {count}</h1>
                <button onClick={this.increment}> Increment </button>
            </div>
        )
    }
}

ကျတော်တို့ ဒီအချိန်မှာ ဘာလို့ mounting method ကို မဖျက်သေးတာလည်းဆိုတော့ သူက

ပထမဆုံးအကြိမ်မှာပဲအလုပ်လုပ်သွားတာကိုပဲ မြင်သာစေချင်လို့ပါ

ကဲ ကျတော်တို့ button လေးကို click လိုက်ကြည့်ကြရအောင်ဗျ အဲလိုနိပ်လိုက်တဲ့အချိန်မှာ

browser console မှာ ဘယ်လိုမျိုးမြင်ရမှာလည်းဆိုတော့

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

ကျတော်တို့ရဲ့ componentDidMount လေးက ဦးဆုံး တကြိမ် အလုပ်လုပ်ပြီးသွားတာနဲ့ သူက ထပ်

အလုပ်မလုပ်တော့ပါဘူး

ကျတော်တို့ state ကို update လုပ်လိုက်တဲအချိန်မျာ componentDidUpdate

ဆိုတဲ့ဟာလေးက အလုပ်လုပ်ပေးတာကိုမြင်ရပါလိမ့်မယ် အဲလောက်ဆိုရင်တော့

ကျတော်တို့ရဲ့ component တစ်ခုမှာ mounting တွေ updating တွေကို မြင်သာသွားမယ်လို့ ထင်ပါတယ်