React State Nedir! Anlatım ve Örnek

React State, React projesinin temelinde yer alan en önemli parçadır, aslında bileşen bazlı frameworklerin hepsinde merkezinde durum yönetimi yer alır. Bundan önceki makalelerde react projesini gerekli olan; bileşen bazlı tasarım, jsx, props ve daha fazla konuyu yazmıştım, eğer bu konularla ilgili herhangi bir bilginiz yok ise ilk önce bu kısımlara bakmanızı öneririm. React State, konusu bundan önceki işlemiş olduğum konuların üstünde yer alır ve bu konuların bilinmesi gerektirir.

React State, bileşenlerdeki dinamik verileri tutmaya yarayan ve bileşenin alt veya üst bileşenlerle ilişkisinde yardımcı olan ve bileşenin projenin tamamı içinde nasıl bir davranacağını belirten bir javascript objesidir. State, yukarıda da söylediğim gibi dinamiktir, her render arasında tekrar güncellenebilir veya değişikliğe uğrayabilir. Renderlar arasında değişen ve değişmeden kalan verileri işleminize ve göstermenize yarar.

React Props makalemin içinde söylemiştim, bazı durumlarda bileşenler içinde veri tutmamanız ve bu verileri aynı bileşen içinde işleminiz gerekir, react props ‘lar sadece okunabilir olduğu için bu nesneyi bileşen içinde kullanamayız, bunun için bileşende eğer değişken veri kullanmak istiyorsak bu fonksiyonaliteyi react state başarmamız gerekir.

Bileşenler içindeki stateler immutable, yani değiştirelemezdir. Bileşen içinde bir state üzerinde güncelleme işlemi yapmak istiyorsak direkt olarak state üzerinde değişiklik yapamayız. Yapmamız gereken bir kopyasını alıp tekrar state ‘i güncellemektir. Bu özellikle bize bileşenler arasındaki her render sonrasında veya zamanın herhangi bir noktasındaki durumları karşılaştırma imkanı verir. Aynı zamanda state ‘i bu şekilde güncelleyerek hot reload(Kodda değişiklik yapıldığında otomatik güncelleme işlemi) dan yararlanabiliriz.

Yukarıdaki cümleleri daha açıklayıcı olması için, state özelliğini kullanarak bir tane todo projesi yapalım. Bu örnekte react hooks’ları kullanacağım, eğer sizde aşağıda benimle bu projeyi örneklemek istiyorsanız, React versiyonunuzun 16.8* olup olmadığını kontrol edin.

İlk olarak gündelik işlemlerimizi ekleyebileceğimiz ve daha sonra bunu bir listede gösterebileceğimiz bir react bileşeni yapıyoruz. Aşağıda da görüldüğü gibi GundelikIsler adında bir bileşen yapıyoruz ve bu bileşen içinde gün içinde yapacağımız işleri ekliyoruz ve aynı bileşen içinde eklemiş olduğumuz işleri liste halinde gösteriyoruz.

Peki yukarıda ne oluyor ?

İlk önce input ile kullanıcının gireceği işleri bileşende tutmak için react ‘ın bize vermiş olduğu state hook ‘unu kullanarak , bileşen içinde bunun için bir durum tutuyoruz, aynı şekilde eklenecek olan islerin bir listesini göstermek için aynı şekilde yine state hook ‘undan yararlanarak isler durumu ve isler durumun güncelleyecek olan setIsler fonksiyonunu alıyoruz. Bu şekilde iki tane ayrı state kullanarak, bileşenemiz için gerekli olan iki tane değişken veriyi, bileşen seviyesinden kontrol altına almış alıyoruz. Burada açıklamak istediğim bir konu daha var, yukarıdaki örnek kapsamında illa ki iki tane durum tutmak zorunda değilsiniz, aşağıdaki gibi tek bir durum tutarak da, iki değişkeni bileşen içinde kontrol altına alabilirsiniz. Yani, durumunuz aşağıdaki gibi olabilir;

Yukarıdaki kullanımı ben bylge.com içinde çok fazla tercih etmiyorum, eğer mümkünse durumları ayrı ayrı tutmak bileşenin içinde merkezişleştirmenin getirmiş olduğu yönetim sorunlarıyla daha az karşılaşmanızı sağlar.

Yukarıda kullandığımız useState ‘e ayrıca bir parantez açmak istiyorum, daha sonra hooks konularında burayı anlatacağım ama kısaca useState size , bileşen içinde kullanacağınız durumu ve bu durumu update etmek için gerekli olan fonksiyonu verir. Kullanımı [state, setState] şeklinde olmalıdır.

Bileşen içinde,ilk olarak input ‘dan gerekli olan işleri onChange eventi ile bileşen içinde oluşturmuş olduğumuz is state ‘inde tutuyoruz, daha sonra ekle butonu ile input değerinde tutmuş olduğumuz değeri, isler state ‘inde tekrar birleştirerek ekranda gösteriyoruz. Burada gördüğünüz iki tane state objesi kullandık, birinci ekleyeceğimiz iş için, diğeri ise göstereceğimiz işler için. Burada isler durumunda tuttuğumuz verileri aynı bileşen içinde göstermek zorunda değiliz. Bu verileri, props ile farklı bir bileşene vererek kullanabiliriz, ama bileşen çok fazla büyümeden bu ayırma işlemlerini yapmanızı tavsiye etmiyorum, bileşen çıkartma ve ayırma dediğimiz bu işlemi eğer bileşeniniz artık çok kalabalık ve yönetilemez duruma geldiği zaman yapmanız mantıklı olur.

Yukarıda dikkat etmeniz gereken bir diğer husus, eğer bakarsak is ve isler statelerinde herhangi bir değişiklik yapmadık, yaptığımız şey state’lerin yeni bir kopyasını alarak yeni bir durum daha yaratmak oldu. Yukarıda da bahsettiğim gibi bu, state ‘in immutable olmasından kaynaklanıyor. Eğer state üzerinde bir değişiklik yapmaya kalkarsanız , react hata verir.

İsterseniz yukarıda input ve button elementlerine bağlamış olduğumuz eventleri farklı bir eventhandler ile yapabilirsiniz yani, input için handleIs veya handleAdd adında iki fonksiyon ekleyerek daha yalın bir tasarım elde edebilirsiniz. Bu şekilde bir değişiklik size daha kontrol edebilir ve javascript mantığına daha uygun bir yazılım yapısı verecektir. Az önce bahsettiğim değişikliği yaparsak fonksiyonumuz aşağıdaki duruma gelir, ikisi arasında işlevsel olarak herhangi bir fark yok, nasıl kullanacağınız tamamen size kalmış durumda;

Yukarıdaki bileşin isterseniz biraz daha geliştirelim. Eklediğimiz işleri silebilmek için yanına bir sil butonu koyarak eklemiş olduğumuz işleri silelim. Bu işlemi aşağıdaki gibi bileşen üzerinde tutmuş olduğumuz isler durumundan ilgili is ‘i silerek isler durumunu güncelleyerek yapabiliriz.

React içinde state kullanımını açıklamak için yukarıdaki verdiğim örneğin yeterince açıklayıcı olduğunu düşünüyorum. Burada ayrıca söylemek istediğim bir konu daha var, bu makale kapsamında sadece bileşen içinde durum yönetimin anlattım. React projesi içinde yer alan lokal durum yönetimini ise başka makaleler bırakıyorum. İkisi bazen yeni başlayan arkadaşlar tarafından karıştırılabiliyor, ancak ikisi tamamen farklı şeyleri ifade eder.

Eğer konuyla ilgili aklınızda soru kalırsa lütfen yorumlarda belirtin, kısa zamanda cevap vermeye çalışacağım.