State and Lifecycle Nedir?

ReactJS'de "State" ve "Lifecycle" iki önemli konsepttir ve modern web uygulamalarının geliştirilmesinde kilit roller oynarlar.

1. State (Durum):

   1. Tanımı: State, bir React bileşeninin herhangi bir zamandaki veri durumunu temsil eder. Bu veri, kullanıcı etkileşimleri veya zaman içindeki değişiklikler sonucu değişebilir.
   2. Örnek Kullanım: Bir form bileşeni düşünün; kullanıcının girdiği metin, bileşenin state'inde saklanabilir. Bu sayede, kullanıcı girdisine göre bileşenin görünümünü ve davranışını dinamik olarak güncelleyebilirsiniz.
   3. Nasıl Çalışır: State, genellikle bileşenin constructor'ında başlatılır ve this.setState fonksiyonu ile güncellenir. State'in değişmesi, bileşenin yeniden render edilmesine sebep olur.

2. Lifecycle (Yaşam Döngüsü):

   1. Tanımı: Lifecycle metotlar, bir React bileşeninin doğumundan ölümüne kadar geçen süreçteki çeşitli aşamalarda tetiklenen özel metotlardır. Bu metotlar, bileşenin nasıl davranacağını ve ne zaman güncelleneceğini kontrol eder.
   2. Örnek Metotlar:
      1. componentDidMount: Bileşen DOM'a eklendikten hemen sonra çağrılır. Genellikle API çağrıları, veri abonelikleri gibi işlemler için kullanılır.
      2. componentDidUpdate: Bileşen güncellendiğinde (örneğin, yeni props aldığında veya state değiştiğinde) çağrılır.
      3. componentWillUnmount: Bileşen DOM'dan kaldırılmadan hemen önce çağrılır. Burada, aboneliklerin iptali gibi temizlik işlemleri yapılır.
   3. Nasıl Çalışır: Lifecycle metotları, bileşen sınıfı içinde tanımlanır ve React tarafından otomatik olarak uygun zamanlarda çağrılır.

React'ın bu iki konsepti, bileşen tabanlı geliştirme yaklaşımının temel taşlarından biridir ve dinamik, interaktif kullanıcı arayüzleri oluşturmak için esneklik ve güç sağlar. State, bileşenin iç durumunu yönetirken, lifecycle metotları bileşenin yaşam sürecini yönetir.

Fonksiyon bileşenlerinde: useState ve useEffect

Yukarıda anlatılan this.setState ve yaşam döngüsü metotları sınıf bileşenlerine aittir. React 16.8 ile gelen Hooks sayesinde bugün aynı işler fonksiyon bileşenlerinde yapılır: durum useState ile tutulur; componentDidMount, componentDidUpdate ve componentWillUnmount işlerinin karşılığı useEffect'tir.

import { useState, useEffect } from 'react';

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    // componentDidMount karşılığı: zamanlayıcıyı kur
    const timerId = setInterval(() => setDate(new Date()), 1000);
    // componentWillUnmount karşılığı: zamanlayıcıyı temizle
    return () => clearInterval(timerId);
  }, []);

  return <h2>Saat: {date.toLocaleTimeString('tr-TR')}</h2>;
}

Bu örnekte saat her saniye güncellenir. useEffect'in döndürdüğü fonksiyon, bileşen ekrandan kaldırıldığında çalışır ve zamanlayıcıyı temizler.