React'te Child'tan Parent'a State Güncelleme

React, komponent tabanlı bir kütüphanedir ve bu komponentlerin birbiriyle veri paylaşması sıkça rastlanan bir durumdur. Ancak, çoğu zaman child komponent üzerinden parent komponentin state‘ini güncellememiz gerekebilir. Bu yazıda, bu sürecin nasıl yürütüleceğini detaylı örneklerle açıklıyoruz.

Temel Konsept: Lifting State Up

İhtiyacınızı temel olarak karşılayacak olan çözüm, “Lifting State Up” kavramıdır. Bu kavram, React uygulamalarında yaygın olarak kullanılan bir desendir. Temel olarak, bir parent bileşen içinde bir durum (state) tanımlanır ve bu durumu değiştiren işlevler (fonksiyonlar) child bileşenlere props olarak geçilir. Böylece parent ve child bileşenler arasında etkileşim ve veri paylaşımı sağlanır.

// Parent Komponent
function Parent() {
  const [parentState, setParentState] = useState(0);
  
  return (
    <div>
      <h1>{parentState}</h1>
      <Child changeParentState={setParentState} />
    </div>
  );
}

// Child Komponent
function Child({ changeParentState }) {
  return (
    <button onClick={() => changeParentState(prevState => prevState + 1)}>
      Artır
    </button>
  );
}

Şimdi yaptığımız işlemi açıklayalım.

Parent Komponent (Üst Bileşen)

Parent komponent ki bu uygulamanızda herhangi bir komponent olabilir mesela App komponenti veya Liste komponenti gibi. Biz örneğimizde Parent adında bir komponent oluşturduk.

Parent adında bir fonksiyon bileşeni tanımlanıyor.
useState kancası kullanılarak parentState adında bir durum (state) ve setParentState adında bir işlev tanımlanıyor. 0 başlangıç değeri ile başlatılıyor.
return bloğunda, parentState değeri bir başlık (<h1>) içinde görüntüleniyor ve altında Child bileşeni yerleştiriliyor. changeParentState adında bir prop olarak Child bileşenine geçiriliyor.

Child Komponent (Alt Bileşen):

Child komponent mesela App komponenti içinde bulunan bir durum komponenti veya Liste komponenti içerisinde bulunan bir ListeElemani komponenti olabilir. Biz yaptığımız örneğe göre açıklayalım. Örneğimizde Child adında bir komponent oluşturdurk.

Child adında bir fonksiyon bileşeni tanımlanıyor ve changeParentState adında bir prop alıyor.
return bloğunda bir düğme (<button>) oluşturuluyor. Bu düğmenin tıklanması durumunda changeParentState fonksiyonu çalıştırılıyor.
changeParentState fonksiyonu, parent bileşende tanımlanan setParentState fonksiyonunu çağırarak parentState durumunu güncelliyor. Bu güncelleme sonucu, parent bileşendeki durum değiştiğinde bu değişiklik child bileşende de yansıtılıyor.

Sonuç olarak, parent bileşendeki durum Parent bileşeninde saklanır ve Child bileşeni bu durumu değiştiren bir fonksiyonu prop olarak alarak etkileşime geçer. Bu, veri paylaşımını ve etkileşimi parent ve child bileşenler arasında sağlayan bir örnektir.

Callback Fonksiyonlar

Bir diğer yaklaşım ise callback fonksiyonları kullanmaktır. Child komponent, parent komponentten bir fonksiyon alır ve bu fonksiyonu tetikleyerek parent’in state‘ini değiştirir.

Callback Fonksiyonlarının Tanımlanması

Parent komponent içinde, state’i güncelleyen bir fonksiyon tanımlanır. Bu fonksiyon daha sonra child komponente bir prop olarak geçirilir.

// Parent Komponent
function Parent() {
  const [parentState, setParentState] = useState('Başlangıç Değeri');
  
  const updateParentState = (newState) => {
    setParentState(newState);
  };
  
  return <Child updateStateFunction={updateParentState} />;
}

Child Komponentte Callback Kullanımı

Child komponent içinde, parent’tan gelen bu fonksiyonu çağırarak parent komponentin state‘ini güncelleyebiliriz.

// Child Komponent
function Child({ updateStateFunction }) {
  const handleClick = () => {
    updateStateFunction('Yeni Değer');
  };
  
  return <button onClick={handleClick}>State Güncelle</button>;
}

Bu Yöntemin Faydaları

Callback fonksiyon kullanmanın kendine has bazı faydaları bulunmaktadır. Bunlar şu şekilde sıralanabilir.

Bağımsızlık: Child komponent, parent komponentin state’ini bilmeden bu işlemi yapabilir. Yani işlevsellik ve yeniden kullanılabilirlik açısından oldukça esnektir.
Karmaşıklık Yönetimi: Daha karmaşık uygulamalarda, çok katmanlı child komponentleri bile bu yöntemle parent state’ine erişebilir.
Hata Ayıklama: Callback fonksiyonları sayesinde, state güncellemeleri daha izlenebilir ve hata ayıklaması daha kolay hale gelir.

Callback Fonksiyon Kullanırken Dikkat Edilmesi Gerekenler

Child komponent ile parent komponentin statene ulaşmak istendiğinde dikkate alınması gereken bazı durumlar vardır.

Öncelikle setState fonksinu asenkrondur. Bu nedenle bazı gecikmeler olabilir. Buna dikkat etmek gereklidir.
Fonksiyonu tetiklerken gerekli parametrelerin doğru geçirilmesine dikkat etmek gerekir.

Sonuç

Child komponentler üzerinden parent komponentin state‘ini güncellemek, React’ın en güçlü özelliklerinden biridir. “Lifting State Up” ve callback fonksiyonları ile bu işlemler kolaylıkla gerçekleştirilebilir.

Sorularınız Varsa

Bu konu hakkında sorularınız varsa, yorum bırakabilir veya bize ulaşabilirsiniz.

React’te Child’tan Parent’a State Güncelleme: Lifting State Up ve Callback Fonksiyonları