7- ReactJS Component Yaşam Döngüsü

Bir önceki dersimizde Redux ile global state kavramını ele almıştık.

Serimizin yedincisi ile devam ediyoruz.

Eğitim Künyesi

Yaşam Döngüsü Nedir?

Teknik açıdan değerlendirecek olursak her uygulamanın başlatılmasından sonlanmasına kadar geçtiği aşamalara / olaylara yaşam döngüsü diyebiliriz.

Bir uygulama ayağa kalkar, gelen girdilere göre durum değişikliklerine uğrar, bir mobil uygulamada arka plana gönderilebilir yani duraklatılabilir ya da nihai olarak tamamen durdurulabilir. Tıpki bir canlının doğup, büyüyüp öldüğü gibi.

React Dünyasında Lifecycle

hooks-api-react · GitHub Topics · GitHub

React dünyasında da lifecycle direk olarak componentleri ilgilendiriyor. Bir componentin ekrana yerleşmesi, durumunun değişmesi, ve ekranda görünürlüğünü kaybetmesi yani kaldırılması gibi olaylar birer yaşam döngüsü unsurlarıdır.

React, bize her aşamayı yakalamayı sağlacak yardımcı bir yapı sunar. Bu olayları yakalayıp işlem yapmamızın uygulama geliştirme aşamasında bize sağladığı faydalar mevcuttur.

Örneğin component ekrana ilk yerleştiği aşamada uzak bir servisten veri çekip ekranda göstermek isteyebilirim. Ya da bir veri objesini izlemeye alıp, üzerinde herhangi bir değişiklik yapıldığında bu değişikliğe bağlı başka bir işlem gerçekleştirebilirim.

React dünyasında lifecycle unsurlarımız aşağıdaki terimler ile tanınıyor. Bunlar;

  • Mounting, component’in DOM içine yerleştirilmesi
  • Updating, component’in DOM içinde güncellenmesi
  • Unmounting, component’in DOM’dan çıkarılması

React, üç durumu da yakalayabilmemiz için bize useEffect ve useLayoutEffect isimli bir hook metodları sunuyor.

Lifecycle Üzerine Örnekler

Mounting

React.useEffect(() => {
    console.log("Component mount (DOM'a yerleşti) oldu")
}, []);

Bir önceki dersimizde bir sayfaya girildiğinde header componentin içindeki title değerinin global state ile güncellenmesini ele almıştık.

Tekrar hatırlatma amacıyla kodumuzu tekrar inceleyelim.

const UserDetail = () => {

    const { name } = useParams();
    const user = users.filter(f => f.name === name)[0];

    const dispatch = useDispatch();
    React.useEffect(() => {
        dispatch({
            type: "SET_PAGE_TITLE",
            payload: `User Detail ${user.name}`
        });
        // eslint-disable-next-line
    }, []);

    return(
        <>
        <div className="user-detail">
            <b>Name: </b> {user.name} {user.surname} <br/>
            <b>Title: </b> {user.title} <br/>
            <b>City: </b> {user.city} <br/>
        </div>
        </>
    );
}

İlgili kısma odaklanalım

 React.useEffect(() => {
        dispatch({
            type: "SET_PAGE_TITLE",
            payload: `User Detail ${user.name}`
        });
        // eslint-disable-next-line   
}, []);

React tarafından sunulan useEffect fonksiyonu bize bahsettiğimiz üç durumu da yakalama fırsatı verir.

Bu şekilde kullanıldığında component DOM tarafına yerleştiğinde durumunu yakalamıza olanak verir.

useEffect, iki adet parametre alır.

Birincisi, olay yakalandığında gerçekleşecek işlemlerin fonksiyon ile sarmalanmış hali. Dikkat edelim () => {} şeklinde bir arrow function yer alıyor.

İkincisi ise bağımlılık dizisinin belirtildiği [] ifadesi. Biz şu an yerleşme olayını yakalamak istediğimiz için herhangi bir bağımlılığımız yer almıyor dolayısıyla bu alanı boş dizi olarak bırakıyoruz.

Updating

React.useEffect(() => {
    console.log("Component mount oldu. title izlenerek Component durumu değişikliğe yakalandı")
}, [title]);

Bu sefer hem component DOM’a yerleştiğinde hem de değişiklik olan durumu yakalık.

Güncelleme değişikliğini yakalayabilmek için bu sefer, dependency array içinde bağımlılık olarak [title] ifadesini kullandık (örnek olarak). title değeri component sınırlarında bulunan bir state değeri. [title] ifadesi ile title değeri üzerinde gerçekleşen değişiklikleri izlemeye almış oluyoruz.

Dependency array yapısı gereği birden fazla değer alarak bu değerler üzerinde gerçekleşen değişiklikleri farklı zamanlarda dahi gerçekleşse yakalayabilir. [title, subTitle, x, y, …]

Unmounting

React.useEffect(() => {
        return () => {
            console.log("Component DOM'dan silindi")
        } 
 }, [])

Bu sefer ilk parametremiz olan arrow function içinde return ile tekrar fonksiyon dönerek (return () => {}) unmount olayını yakalamış olduk.

Unmounting olayını genelde component ekrandan kaybolduğunda yapılmak istenen işler için kullanıyoruz.

Örneğin mount olayında bir soket bağlantısı açmışımdır ve component ekrandan kaybolduğunda (genelde kullanıcı başka bir sayfaya geçer) kaynaklarımı tüketmemek adına soket bağlantısını kapatmak isteyebilirim.

Proje Üzerinde Örnek Yapalım

Proje örneğimizde mount olayını yakalamıştık. Updating olayını yakalamak için biraz değişiklik yapalım.

İlk aşamada title değerimizi state’de tutalım ve başlangıç değerini ilk görüntülemek istediğimiz değer olarak verelim. dispatch ederken de local stateden gönderelim. Sonrasında aynı ekrandayken title değerini değiştirelim ve bu değişikliği tekrar dispatch edelim.

Bunu için UserDetail’de aşağıdaki değişiklikleri yapalım

title değerimizi tutacak olan state’imizi tanımlayalım

const [ title, setTitle ] = React.useState(`User Detail ${user.name}`);

useEffect’i aşağıdaki gibi değiştirelim

React.useEffect(() => {
        dispatch({
            type: "SET_PAGE_TITLE",
            payload: title
        });
}, [title]);

Burada dispatch fonksiyonu içindeki değeri artık state’den almış olduk. Ayrıca title’daki değişikliği yakalayabilmek için [title] ifadesi ile izlemeye aldık.

Şimdi de state’de bulunan title değerimizi değiştirecek işlemi yapalım

<button onClick={() => setTitle("Title değişti")}>
     Title'ı değiştir
 </button>

<button onClick={() => setTitle(`User Detail ${user.name}`)}>
  Title'ı eski haline geri getir
</button>

Çıktımızı kontrol ettiğimizde değişikliklerin yansıdığını görüyoruz.

Ek olarak unmount işlemini yakalamak için bir useEffect fonksiyonu daha ekleyelim

React.useEffect(() => {
        return () => {
            alert("Detay sayfadan çıkıldı")
        }
  }, []);

Tam çıkma esnasında aşağıdaki gibi bir alert görüntülenecek ve alarm penceresini kapattıktan sonra erişmek isteğimiz sayfaya geçilecektir.

Componentimizin kodları nihai olarak aşağıdaki gibi olacaktır.

import React from 'react';
import { users } from '../../data';
import { useParams } from 'react-router-dom';
import { useDispatch } from 'react-redux';

const UserDetail = () => {

    const { name } = useParams();
    const user = users.filter(f => f.name === name)[0];

    const [ title, setTitle ] = React.useState(`User Detail ${user.name}`);


    const dispatch = useDispatch();
    
    React.useEffect(() => {
        dispatch({
            type: "SET_PAGE_TITLE",
            payload: title
        });        
    }, [title]);

    React.useEffect(() => {
        return () => {
            alert("Detay sayfadan çıkıldı")
        }
    }, []);


    return(
        <>
        <div className="user-detail">
            <b>Name: </b> {user.name} {user.surname} <br/>
            <b>Title: </b> {user.title} <br/>
            <b>City: </b> {user.city} <br/>
        </div>
        <br />
        <br />
        <button onClick={() => setTitle("Title değişti")}>
            Title'ı değiştir
        </button>

        <button onClick={() => setTitle(`User Detail ${user.name}`)}>
            Title'ı eski haline geri getir
        </button>
        </>
    );
}

export default UserDetail;

Bu işlem ile birlikte dersimizi sonlandırıyoruz. Derste yazdığımız kodların son haline buradan erişebilir, dilerseniz aşağıdan çalıştırılabilir haline gözlemleyebilirsiniz.

Bir sonraki dersimizde Axios ile API entegrasyonları konusunu ele alacağız.

Sağlıkla kalın 🙂

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.