React Context State ve Props Farklılıkları

Özellikle React kullanmaya yeni başlayanlar için bu üç kavramın oturması biraz zaman alabilir. Aslında bu üç kavram da, state, context, props, React JS üzerinde değişkenleri tutmak için kullanılır. Fakat kendi aralarında özellikle kullanım alanları ve şekilleri açısından farklılıklar vardır.

Ve özellikle de değişken kapsamı (geçerli olduğu alan) oldukça farklıdır. Şimdi kısaca bu terimleri ne olduğuna bakalım ve sonra da aralarındaki farkları inceleyelim.

React Props

Props, bir React komponentine veri geçirmenin kolay bir yoludur. Bir Html etiketine ve özellik ekler gibi bir komponente eklenir. Sonrasında bu özellikler, komponnent içerisinde bir değişken (sabit) olarak kullanılırlar. Mesela, yeni gelen üyeye ismi ile hoşgeldin demek istediğimizi varsayalım.

    ...
    <Hosgeldin isim="Halil" />
    ...

Şeklinde kullanacağımız bir komponentimiz olsun. Şimdi bu komponenti yazalım.

export default function Hosgeldin(props) {
    const uyeAdi = props.isim;
    return (
        <div>
            <h3>Hoşgeldin { uyeAd }</h3>
        </div>
    );
}

Komponente props adında bir parametre geçtik. Bu parametre React tarafından sağlanıyor. Komponent kullanıldığı zaman verilen tüm özellikler bu props nesnesinin bir özelliği olarak fonksiyona gönderiliyor.

Yukarıdaki örneğimizde <Hosgeldin isim="Halil" /> isim özelliği fonksiyona props.isim olarak geçti. props özelliği tek yönlü çalışır. Üst komponentten (parent) alt komponente (child) bir değer geçirmek için kullanılır. Bu değerler değiştirilemezler.

React JS Props Kullanımı yazımızda daha ayrıntılı bilgiler bulabilirsiniz.

React State

React state komponent içerisinde bir değişken ve onu değiştirecek bir fonksiyon kullanımından ibarettir. Bu değişkenler diret değiştirilemezler. Kullanılmak istendiğinde ismi ile çağrılırlar ve değerleri değiştirilecekken önceden tanımlanmış fonksiyon kullanılır.

Komponent içerisinde kullanılmak için geliştirilmiştir. Bir input elementinin sürekli değişebilecek değerini tutmak gibi işlemlerde kullanılır. Ayarlanması için setState hooku kullanılır.

import React, { setState } from "react";

export default function App() {
    const [isim, setIsim] = useState("");

    const handleChange = (e) => {
        e.prenventDefault();
        setIsım(e.target.value);
    }

    return (
        <div>
            <h3>İsim: { isim }</h3>
            <hr />
            <input type="text" value={isim} onChange={handleChange} />
        </div>
    );
}

Yukarıdaki örneğimizi çalıştırdığımızda, ekranda bir başlık, çizgi ve bir metin giriş alanı görüntülenecektir. Eğer metin giriş alanına birşeyler yazacak olursak, aynı zamanda bu değer İsim: kelimesinin yanına da yazılacaktır.

input etiketi, bir metin yazılırken onChange metodunu çağırır, sonra bu metod bizim yazdığımız handleChange fonksiyonunu çağırır. handleChange içerisinde setIsım metodu ile input değerini isim değişkenine atar. Sonrasında isim değişkeni tekrar input etiketinin value değerine atanır. Ayrıca İsim: kelimesinin yanında da gösterilir.

Böylece anlık değişiklikleri kolaylıkla komponent içerisinde yakalayabiliriz.

useEffect İle React State Değişikliklerini Yakalamak yazımızda state kullanımı ile ilgili örneklere ulaşabilirsiniz.

React Context

Context biraz daha gelişmiş bir konudur. Kapsadığı tüm alanlarda kullanılmak üzere değişken ve metodlar tanımlanmasına izin verir. Bu global bir objedir ve uygulamanın her yerinde kullanılabilir.

Sadece değişkenler değil, ayrıca metodlar da tanımlanabilir. Yine bir komponent içerisinde context üzerinde tanımlanmış bir değişkenin değeri değiştirildiğinde diğer kullanıldıkları yerlerde de değiştirilecektir.

Böylece tüm uygulama üzerinde çalışan değişkenlere sahip oluyoruz.

Önemli bir nokta context üzerinde tanımlanan değişkenler asenkron çalışır. Yani bir yerde yapılan bir değişikliğin kontext üzerinde değişerek diğer kullanıldıkları komponentlere etki etmesi eş zamanlı olmaz. Belirli bir süre gerektirir.

Mesela kontext üzerinde uyeAdi şeklinde bir değişken tanımladığımızı düşünelim. Üye bilgileri ekranında uyeAdi değişkeninin değerini değiştirelim ve aynı zamanda aynı komponent üzerinde bir ön izleme açtığımızda, input üzerinde üye adını değiştirdiğimizde eş zamanlı olarak komponent üzerindeki ön izlemesi değişmeyebilecektir. Bu konuya dikkat etmek gerekir.

React context işlemleri için Context API yi geliştirmiştir. Yine Redux gibi bir çok eklenti ile kontext işlemleri yapılabilir. Her eklentinin kendine göre artıları ve eksileri vardır.

React Context Api Kullanımı ile ilgili giriş yazımızda daha geniş bir inceleme bulunmaktadır.

Context State ve Props Arasındaki Genel Farklılıklar

• Context global olarak tanımlanır. Uygulamanın her yerinde ulaşılabilir.
• Context eş zamanlı çalışmaz. Bu nedenle bir değişken context üzerinde değiştirildiğide tüm uygulamada aynı anda değişmez.
• Context uygulamanın her yerinde kullanılmak istenen değişkenler için uygun bir yapıdır.
• Props bir üst komponent üzerinde tanımlanır ve alt komponente bir özellik olarak geçirilir.
• Props değişken ve fonksiyon alabilir. Porps tek yönlüdür.
• Props değişkenler aslında birer sabittirler ve değerleri değiştirilemez.
• Bir komponente geçilen tüm üzellikler (properties) props nesnesi içerisinde tutulur.
• State bir component üzerinde tanımlandır.
• State tanımlanırken değişken ve onu değiştirecek bir fonksiyon tanımlanır.
• Component içerisinde anlık takip edilmesi gereken durumlar için kullanılır.

Sonuç

React uygulama geliştirirken bize farklı işlemler için farklı kullanımlar sunar. Bunlardan değişkenler için olanlardan bazıları context, state ve props kullanımlarıdır. Hepsinin kendine göre özellikleri ve sınırlamaları bulunmaktadır.

React JS ile ilgili tüm sorularınızı yorumlardan bize ulaştırabilirsiniz.