componentWillUnmount()

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

ဘယ်အချိန်မှာအလုပ်လုပ်ပေးတာလည်းပေါ့ ဒီဟာကလည်း သူ့ ရဲ့ name အတိုင်းပါပဲ သူက

ကျတော်တို့ရဲ့ browser dom ကနေပြီးတော့ အဲ component ကို remove လုပ်လိုက်တဲ့အချိန်မျာအသုံးပြုတာပါ

နားလည်အောင်ပြောရမယ်ဆိုရင်

ကျတော်တို့ က component ကို browser dom tree ပေါ်ကို render လုပ်လိုက်တဲ့အချိန်မှာ

component နဲ့ သက်ဆိုင်တဲ့ mounting နဲ့ updating က အလုပ်လုပ်ပေးသွားပါတယ်

တချို့အခြေအနေတွေမှာ ကျတော်တို့က event တခုခုကို long term အနေနဲ့အလုပ်လုပ်ခိုင်းခဲ့တာမျိုးတွေရှိတယ်

မြင်သာအောင်ပြောရရင် ကျတော်တို့ component တခုကို render ချလိုက်တဲ့အခါမှာ သူရဲ့

သက်ဆိုင်တဲ့ event တွေကို react က dom ပေါ် တင်ပေးတယ်ပေါ့ ဒီအထဲမှာ တချို့ event တွေက

window မှာ သွားပြီးတော့အလုပ်လုပ်တာမျိုးတွေ ရှိတယ် အဲလိုမျိုး event တွေကို ကျတော်တို့အနေနဲ့

component ကို remove လုပ်လိုက်တဲ့အချိန်မှာ ပြန်ပီးတော့ cancel လုပ်ပေးသွားရမယ့်အခြေအနေမျိုးမှာ

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

ဒီအချိန်မှာ ကျတော်တို့ က ဘာတွေ သုံးမှာလည်းဆိုတော့ component ၂ ခုကိုအသုံးပြုပါမယ်

ComponentA နဲ့ Component B ပေါ့

ကျတော်တို့ ComponentA ထဲမှာ ဒီလိုလေးရေးလိုက်ပါမယ်

import { Component } from 'react'
import ComponentB from './ComponentB'

class ComponentA extends Component {
    constructor(){
        props()
        this.state = {
            show : false 
        }
    }
    showHandler = () =>{
        this.setState({
            show : !this.state.show
        }
    }
    render(){
        return (
            <>
                {this.state.show && <ComponentB />}
                <button onClick={this.showHandler}>Show</button>
            </>
        )
    }
}
export default ComponentA

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

import { Component } from 'react'

class ComponentB extends Component {
    resizeHandler = () => {
        console.log("resizing")
    }
    componentDidMount() {
        window.addEventListener("resize" , this.resizeHandler)
    }
    render() {
        return (
            <div>ComponentB</div>
        )
    }
}
export default ComponentB

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

ပထမဦးဆုံး ကျတော်တို့က ComponentA ထဲမှာ conditional render ကိုအသုံးပြုပြီးတော့

ComponentB ကို browser dom ပေါ်ကိုတင်လိုက်ပါမယ် ပြီးသွားရင်သူက show : false

ဖြစ်သွားတဲ့အချိန်မှာ ကျတော်တို့က ComponentB ကို dom ကနေပြီးတော့ remove

လိုက်လုပ်ပါမယ်ဆိုပြီးတော့ ကျတော် ရေးထားပါ

ComponentB မှာ က ကျတော့ ကျတော်တို့က ComponentB က browser dom ပေါ်ကို

mounting လုပ်လိုက်တာနဲ့ ကျတော်တို့က window ကို event တခုကို add ခဲ့ပါတယ် အဲကောင်က

ဘာလည်းဆိုတော့ ကျတော်တို့က resize လုပ်ခဲ့ရင်ပေါ့ အဲလိုမျိုး ရေးခဲ့တာပါ ကဲ အဲလောက်ဆိုရင်တော့

ကျတော်တို့ စမ်းသပ်ကြည့်လိုက်ကြရအောင်

ကျတော်တို့ show ကိုနိပ်ကြည့်ပြီးတော့ browser ကို resize လုပ်တဲ့အချိန်မှာ console က

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

အဲလိုမျိုး အခြေအနေမှာ ကျတော်တို့က show ကိုထပ်ဖျောက်လိုက်မယ်ဆိုပါစို့ အဲအချိန်မှာ ကျတော်တို့က

ဘာတွေထပ်ဖြစ်နေမှာလည်းဆိုတော့ resize က ထပ်ပြီးတော့အလုပ်လုပ်နေဦးမှာပါ

တကယ့် logical အရဆိုရင်တော့ အဲဒါ က အဓိပ္ပာယ်မရှိတော့ပါဘူး ဘာလို့လည်းဆိုတော့ ကျတော်တို့က

ComponentB ကို browser dom ကနေပြီးတော့ remove လုပ်လိုက်တဲ့အတွက် သူနဲ့ သက်ဆိုင်တဲ့

event တွေအကုန်လုံးကို ပါ ပြန်ပြီးတော့ cancel ဖြစ်သွားရမှာပါ အဲလိုမျိုး အလုပ်လုပ်တာကို

မြင်သာစေချင်တယ်ဆိုရင် ကျတော်တို့ က componentWillUnmount ကို အသုံးပြလိုက်ပါမယ်

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

import { Component } from 'react'

class ComponentB extends Component {
    resizeHandler = () => {
        console.log("resizing")
    }
    componentDidMount() {
        window.addEventListener("resize" , this.resizeHandler)
    }
    componentWilUnmount() {
        window.removeEventListener("resize" , this.resizeHandler)
    }
    render() {
        return (
            <div>ComponentB</div>
        )
    }
}
export default ComponentB

ကျတော်တို့ရဲ့ window မှာ add လုပ်ခဲ့တဲ့ event ကို componentWillUnmount ဆိုတဲ့ method ထဲမှာ

ပြန် ပြီးတော့ cancel လုပ်သွားတာကို မြင်ရပါမယ်ဗျ အဲဒီအတွက် ကျတော်တို့က ComponentB ကို

browser Dom ထဲကနေပြီးတော့ remove လုပ်လိုက်တဲ့အချိန်မှာ သူနဲ့ သက်ဆိုင်တဲ့ event တွေ function

တွေကိုအကုန် ပြန်ဖျက်ပေးသွားပြီးတော့ component ကလည်း လုံးဝကို independent ဖြစ်သွားမှာပါ

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