React 103

Selamlar. Daha önce componentlerin ne işe yaradığından, sağladığı fayda ve yönetim şekillerinden bahsetmiştik. Bugün de component yaşam döngüsünü (lifecycle) inceleyelim istiyorum.

Öncesinde şunu belirtmem gerekiyor componentler iki farklı yapıyla oluşturulabilinir; class component ya da functional component.

Class component, React.Component classından türetilir. render() metodu ile jsx yapısını return eder. Yaşam döngüsündeki farklı fazlar için componentDidMount, componentWillUnmount gibi farklı metotları vardır. Bunlar sayesinde veri manipülasyonu, state kontrolü gibi işlemleri sağlar.
Stateful bileşenlerdir, kendi statelerini yönetebilirler. (this.state, this.setState)
Yaşam döngüsü metotları sayesinde class component kullanımı, daha komplike logic yönetimlerinde faydalı olabilir.

import React from 'react';

class SimpleCounter extends React.Component {
  constructor(props) {
    super(props);
    // state tanımlıyoruz
    this.state = {
      count: 0
    };
  }

  // butona tıklanınca çalışacak olan fonksiyon, counter arttırır
  incrementCount = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  };

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

export default SimpleCounter;

Functional Component, yazımı daha kolay ve daha sık kullanılan componenttir. Direkt olarak jsx yapısını return eden fonksiyonlardır. Stateless yapıdadırlar, kendilerine ait bir state yapısı yoktur. React hooklar sayesinde state yönetimi yapılır. O yüzden functional componentlerdeki yaşam döngüsünü hooklar sayesinde yapabiliyoruz.
Tekrar kullanılabilirler ve syntax olarak daha düz ve okunması kolaydır. Class componentlere göre daha iyi performansa sahiptirler çünkü ek yükleri azdır.

import React, { useState } from 'react';

const SimpleCounter = () => {
  // useState kullanarak state tanımlıyoruz
  const [count, setCount] = useState(0);

  // butona tıklanınca çalışacak olan fonksiyon
  const incrementCount = () => {
    setCount(count + 1);
  };

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

export default SimpleCounter;

Bir componentin yaşam döngüsünde temelde 3 tane faz vardır;

1. Mounting fazı: JSX’in derlendiği, componentin DOM üzerinde görüntülendiği fazdır. State oluşturulur eğer bir veriyle initialize edilmesi gerekiyorsa ataması yapılır. Bu süreçte kullanılan önemli metodlar arasında constructor, componentDidMount ve render bulunur.
2. Updating fazı: Componentin state ya da propsunda herhangi bir güncelleme olduğunda bu faza düşmüş oluyoruz. Bileşenin yeniden render edilmesi ve DOM’un güncellenmesi sürecidir. Bu fazda kullanılan önemli metotlar arasında componentDidUpdate, shouldComponentUpdate, ve render bulunur.
3. Unmounting fazı: Yaşam döngüsündeki son adımdır. Bu aşamada, bileşen DOM’dan kaldırılır ve temizleme işlemleri yapılır. Unmounting fazı sırasında kullanılan önemli metod componentWillUnmountdır.

Yaşam döngüsü metotları

• componentDidMount(): component DOM’a eklendikten sonra çağrılır. Bileşenin kurulumunu yapmak için kullanılan bir fonksiyon olarak düşünülebilir. Veri manipülasyonu veya bir servise istek atmak için en doğru yerdir.

componentDidMount() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
}

• componentDidUpdate(): component yeniden render olduğunda çağrılır. Bileşenin hangi durumlarda render olacağı, state veya props değişikliklerine bağlıdır.

componentDidUpdate(prevProps, prevState) {
  if (this.state.count !== prevState.count) {
    // count statein değiştiği durum (update)
    console.log('Count state değişti.');
  }
}

• componentWillUnmount(): component DOM’dan silinmeden hemen önce çağrılır. Temizleme işlemlerini yapmak için kullanılan bir fonksiyon olarak düşünülebilir. Bir kullanıcı ismi tutuyorsanız bunu ekrandan silmek, herhangi bir timer varsa bunu sıfırlamak gibi işlemler için kullanılır.

componentWillUnmount() {
  clearInterval(this.timerID);
}

Bu metotlar class componentle kullanılabilir. Peki bunların functional componentlerdeki karşılıkları nelerdir?

Get Elif Yılmaz’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

componentDidMount, componentDidUpdate, componentWillUnmount metotlarını “useEffect” hooku kullanarak karşılayabiliriz.

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

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

  useEffect(() => {
    // componentDidMount
    console.log('Bileşen DOM\'a eklendi.');
    const timerID = setInterval(() => {
      console.log('Interval çalışıyor.');
    }, 1000);

    // componentDidUpdate
    console.log('Count değişti:', count);

    // componentWillUnmount
    return () => {
      console.log('Bileşen DOM\'dan kaldırılıyor.');
      clearInterval(timerID);
      console.log('Interval temizlendi.');
    };
  }, [count]); // count değiştiğinde useEffect çalışır

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

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

export default SimpleCounter;

“useState” hook'u, fonksiyonel bileşenlerde bileşenin başlangıç durumunu (initial state) ayarlamak için kullanılır ve sınıf bileşenlerindeki constructor fonksiyonunun yerine geçer.

Sonuç olarak, React’te componentlerin yaşam döngüsü, kullanıcı etkileşimlerine ve veri güncellemelerine nasıl tepki verdiklerini anlamak açısından kritik öneme sahiptir. Class componentler, daha karmaşık mantık ve durum yönetimi için yaşam döngüsü metotlarını kullanırken, fonksiyonel componentler React Hook’ları sayesinde benzer işlevselliği daha sade ve okunabilir bir şekilde sunar.

Component lifecycle’dan bahsettiğim bu yazı umarım sizin için faydalı olmuştur! Herhangi bir bilgi eksiği ya da yanlışı varsa bana mail, yorum atarak ulaşabilir, uyarabilirsiniz. Ne de olsa ben de sizlerle beraber öğrenmeye çalışıyorum🙃 Sağlıkla kalın.

*Yazıyı düzenlerken dinlediğim playlisti de şöyle not düşeyim :)