React'ta bileşenlerin durumunu nasıl doğru şekilde değiştirirsiniz?

React'te durum değişikliği, sınıf bileşenleri için setState yöntemi veya fonksiyonel bileşenler için useState kancası kullanılarak gerçekleşir.

Sınıf bileşenleri:

// React'i içe aktar
import React, { Component } from 'react';

// Sınıf bileşeni oluştur
class MyComponent extends Component {
  // Durumu başlat
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Durumu değiştiren yöntem
  incrementCount = () => {
    // setState kullan
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Sayaç: {this.state.count}</p>
        <button onClick={this.incrementCount}>Arttır</button>
      </div>
    );
  }
}

// Bileşeni dışa aktar
export default MyComponent;

• setState asenkroniktir.
• setState, yeni durumu mevcut durumla birleştirir (shallow merge).
• setState, önceki duruma bağlı yeni durumu döndüren bir fonksiyon alabilir:

// Fonksiyon kullanarak durumu değiştiren yöntem
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Fonksiyonel bileşenler (useState kullanarak):

// React ve useState içe aktar
import React, { useState } from 'react';

// Fonksiyonel bileşen oluştur
function MyFunctionComponent() {
  // useState ile durumu başlat
  const [count, setCount] = useState(0); // [mevcut durum, güncelleme fonksiyonu]

  // Durumu değiştiren fonksiyon
  const incrementCount = () => {
    // Güncelleme fonksiyonunu kullan
    setCount(count + 1);
  };

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={incrementCount}>Arttır</button>
    </div>
  );
}

// Bileşeni dışa aktar
export default MyFunctionComponent;

• useState, iki öğe içeren bir dizi döndürür: mevcut durum ve güncelleme fonksiyonu.
• useState tarafından döndürülen güncelleme fonksiyonu, mevcut durumu değiştirmek yerine yerine koyar.
• Durumun önceki değerine bağlıysa, bir fonksiyon geçirebilirsiniz:

// Durumu değiştiren fonksiyon
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Durumu değiştirirken önemli noktalar:

• Durumu doğrudan değiştirmeyin: Asla state özelliğine yeni bir değer atamayın (this.state.count = 5 veya count = 5). React bu değişikliği fark etmez ve bileşen yeniden render edilmez.
• Nesne ve dizilerde değişiklik: Durumda nesne veya dizi değiştirirken, her zaman yeni kopyalar oluşturun. React, nesne/dizi referanslarını karşılaştırır ve referans değişmediyse, verilerin değişmediğini varsayar ve yeniden render etmez.

// Sınıf bileşeninde nesne değişikliği
this.setState(prevState => ({
  user: {
    ...prevState.user, // Eski özellikleri kopyala
    name: 'Yeni isim' // Gerekli özelliği güncelle
  }
}));

// Fonksiyonel bileşende dizi değişikliği
setItems(prevItems => [...prevItems, 'Yeni öğe']); // Yeni öğe ekle

• setState asenkronluğu: Durum güncellendikten ve bileşen yeniden render edildikten sonra bir işlem yapmak istiyorsanız, setState'in ikinci argümanı (geri çağrı fonksiyonu) veya fonksiyonel bileşenlerde useEffect kancasını kullanın.

// setState'de geri çağrı
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Durum güncellendi!');
});

// Durum değişikliğine tepki vermek için useEffect
useEffect(() => {
  console.log('count durumu değişti:', count);
}, [count]); // Bağımlılık: count değiştiğinde tetiklenir

Yöntemlerin karşılaştırılması:

Özellik	Sınıf bileşeni (setState)	Fonksiyonel bileşen (useState)
Sözdizimi	this.setState(yeniDurum[, geriÇağrı])	const [state, setState] = useState(başlangıçDurumu)
Birleştirme/Değiştirme	Yeni durumu mevcutla birleştirir (shallow merge)	Mevcut durumu yeniyle değiştirir
Asenkron	Asenkron	React'in render fazında çağrıldığında asenkron, olay işleyicilerinden çağrıldığında senkron
Önceki duruma bağlılık	this.setState(prevState => ({...})) şeklinde fonksiyon kullanılır	setState(prev => ({...})) şeklinde fonksiyon kullanılır