React Class Component Lifecycle Method'larının useEffect ile Kullanımı

React 16.8 sürümünden önce class based componentler kullanmak zorundaydık. Şimdi Hooks ile birlikte functional componentler kullanıyoruz. Class based componentlerde; data alışverişi, state yönetimini kısacası tüm yaşam döngüsünü componentDidMount, componentDidUpdate , componentWillUnmount methodları ile ele alıyorduk. React Hooks ile birlikte bunların yerini useEffect aldı. Functional Componentler'de yaşam döngüsünü useEffect ile nasıl kullanıldığını konuşacağız.

Yazı içeriği

componentDidMount

componentDidMount() method'u, component dom'da render olduktan sonra çalışıyor.

// ccomponentDidMount() ile
componentDidMount() {
    console.log('Selam');
}

//  useEffect() ile
useEffect(() => {
    console.log('Selam');
}, [])

Eğer boş bir array'i parametre olarak geçmeseydik; component, her değişiklik olduğunda çalışacaktı. Bu yüzden boş bir array geçmek zorundayız. Herhangi bir state veya props'a bağlı kalmadan bir seferliğine çalışacağını React'a bildirmiş oluyoruz.

componentDidUpdate

Herhangi bir props veya state güncellendikten hemen sonra method çalışır.

// ccomponentDidUpdate() ile
componentDidUpdate(state) {
    console.log(`Selam ${state}`);
}

//  useEffect() ile
useEffect(() => {
    console.log(`Selam ${state}`);
}, [state])

Güncellendikten sonra çalışmasını istediğimiz state'i parametre olarak belirtiyoruz.

componentWillUnmount

Component, unmount veya yok edilirken çalıştırmak istediğimiz methodları componentDidUnmount() içinde yazıyorduk. useEffect() ile bunu sadece return promise'i ile yakalayabiliyoruz.

//  componentDidUnmount() ile
componentWillUnmount() {
    console.log('Güle Güle');
}

//  useEffect() ile
useEffect(() => {
    console.log('Selam');
    return () => {
        console.log('Güle Güle');
    }
}, [])

İlişkili Yazılar

You can say hello to me below or you can hire me.