React Yaşam Döngüsü (Lifecycle)

React uygulamalarının temel yapı taşlarından biri olan "yaşam döngüsü" hakkında konuşacağız. React'te, bileşenlerin yaratılması, güncellenmesi ve yok edilmesi süreçlerinde belirli aşamalar bulunur. Bu aşamaları anlamak, uygulamanızı daha verimli bir şekilde yönetmenize ve hataları önlemenize yardımcı olabilir. Şimdi, React'in yaşam döngüsünü adım adım keşfetmeye başlayalım.

Montaj (Mounting): Bir bileşenin oluşturulduğu ve DOM'a yerleştirildiği aşamadır. Bu aşama, constructor() metodu ile başlar ve componentDidMount() metodu ile sona erer. Bileşen oluşturulduğunda ilk kez çalıştırılan constructor(), bileşenin başlangıç durumunu ve gerekli başlangıç ayarlarını yapmak için kullanılır. Ardından, bileşen DOM'a yerleştirildiğinde çağrılan componentDidMount(), AJAX istekleri yapmak, abonelikleri başlatmak gibi işlemler için ideal bir yerdir. UseEffect hooku ile basit bir örnek ile ilk render işlemini ve componentin kaldırılması ile ilgili konuşalım.

  useEffect(() => {
    console.log('Component ilk render edildi.');
    return () => {
      console.log('Component kaldırıldı.');
    };
  }, []);  // Buradaki bağımlılığımız ilk render işlemi için geçerli. []

Güncelleme (Updating): Bileşenin durumunun veya özelliklerinin değiştiği ve yeniden render edildiği aşamadır. Bu aşama, setState() veya forceUpdate() çağrıldığında tetiklenir. Güncelleme sürecinde, shouldComponentUpdate(), componentDidUpdate() gibi yaşam döngüsü metotları kullanılarak gereksiz yeniden render işlemleri önlenir ve güncelleme sonrası ek işlemler yapılabilir.

useEffect(() => {
    console.log('Count değeri güncellendi:', count);
  }, [count]);

  const incrementCount = () => {
    setCount(count + 1);
  };

Burda ise bir güncelleme işlemi ile count değişkenine +1 ekliyoruz. Yukarıdaki useEffect bağımlılığındaki [count] bu değişkenin her değiştiğinde tetikleniyor. Consolumuzu açarsak her tetiklenmede 'Count değeri güncellendi' yazısını göreceğiz.

Kaldırma (Unmounting): Bileşenin DOM'dan kaldırıldığı ve bellekten silindiği aşamadır. Bu aşama, componentWillUnmount() metodu ile temsil edilir. Bileşen, artık kullanılmadığında veya başka bir bileşene yer açmak için kaldırıldığında bu metot çalıştırılır. Bu aşamada, aboneliklerin iptal edilmesi, event dinleyicilerinin kaldırılması gibi temizlik işlemleri gerçekleştirilir.

Tam örnek bu şekilde ;

import React, { useState, useEffect } from 'react';

const OrnekComponent= () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component ilk render edildi.');
    return () => {
      console.log('Component kaldırıldı.');
    };
  }, []);

  useEffect(() => {
    console.log('Count değeri güncellendi:', count);
  }, [count]);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default OrnekComponent;

React'te yaşam döngüsünü anlamak, uygulamanızın performansını artırmanıza ve kodunuzu daha düzenli hale getirmenize yardımcı olabilir. Her bileşenin farklı bir yaşam döngüsüne sahip olması, uygulamanızın davranışını daha iyi kontrol etmenizi sağlar.