Jetpack Compose Side Effects & Effect Handlers -II
Giriş
Selamlar🖐, bu yazımızda uygulamamızın başına bela olabilecek side effectlere ve bunlar ile başa çıkabilmek için jetpack compose’un bizler için çıkardığı Effect Handlers konuları ile ilgileneceğiz.
Bu yazı, serimizin 2. yazısı olacak ve serinin önce ilk yazısını okumanız konunun anlaşılabilmesi için daha iyi olacaktır. Bu yazımızın içerisinde de ilk yazımızda başlangıcını yapmış olduğumuz effect handler türlerine devam edeceğiz. Hadi gelin başlayalım!🧑🏻🚀
RememberCoroutineScope
RememberCoroutineScope, Compose UI kitinin bir parçası olan Kotlin Coroutine framework’ünün bir özelliğidir. Bu işlev, bir CoroutineScope nesnesi oluşturmak için kullanılır ve bu nesne, asenkron kodlama tekniklerini kullanarak UI thread’inden ayrı bir thread’de çalışan işlemleri yönetmenizi sağlar.
RememberCoroutineScope, CoroutineScope nesnesinin durumunu hatırlayarak, widget’lar gibi UI unsurlarının yeniden düzenlenmesi veya yinelemesi sırasında bu durumun korunmasına yardımcı olur. Bu, işlemlerin doğru bir şekilde yönetilmesini sağlar ve gereksiz hataların önüne geçer.
Ayrıca, rememberCoroutineScope, CoroutineScope nesnesini otomatik olarak temizler, bu da gereksiz bellek kullanımını önlemeye yardımcı olur. Bu nedenle, CoroutineScope nesnesini manuel olarak temizlemek zorunda kalmazsınız ve uygulamanın performansı artar.
API isteği attığımız bir örnek ile bir kullanım örneği yapalım.
Bu örnekte, rememberCoroutineScope ile yeni bir CoroutineScope nesnesi oluşturulur. Daha sonra, Button widget’ına tıklanarak bir ayrı thread’de gerçekleştirilmesi gereken işlem başlatılır. Bu işlem, RetrofitInstance yardımıyla API’ye bir istek yapar ve sonucunu apiResult mutableStateOf nesnesinde saklar.
Sonuç olarak, Compose’un rememberCoroutineScope özelliği sayesinde, API çağrısı gibi ağ işlemleri gibi uzun süren işlemleri yönetmek kolaylaşır ve daha verimli bir geliştirme deneyimi sunar.
RememberUpdatedState
Compose, uygulamaların dinamik olarak değişen durumlarını yönetmek için bazı veri yapıları sağlar ve bu veri yapılarından biri de rememberUpdatedState fonksiyonudur. Bu fonksiyonun özelliği, herhangi bir değişiklik yapıldığında, bir değişiklik numarası (change count) izlemesidir. Bu numara, değerin en son ne zaman değiştirildiğini takip etmek için kullanılır.
Kullanıcının bir çemberin yarıçapını ve rengini seçebileceği bir uygulama tasarlayacağız. Seçimler yapıldığında, çemberin alanı ve çevresi hesaplanacak ve rememberUpdatedState fonksiyonu, yarıçap ve renk seçimlerini izleyecek ve değişiklikler olduğunda bileşenin yeniden çizilmesini sağlayacak. Hadi senaryomuza uygun bir kod parçası oluşturalım.
Bu örnekte, rememberUpdatedState fonksiyonu, radius ve color değişkenlerini izler ve değiştirildiğinde bileşenin yeniden çizilmesini sağlar. calculateArea ve calculateCircumference fonksiyonları, hesaplamaların yapıldığı fonksiyonlardır ve remember fonksiyonu ile önbelleğe alınır. Bu sayede, yarıçap değiştiğinde hesaplamalar yeniden yapılmaz ve daha hızlı bir uygulama deneyimi sağlanır.
ProduceState
produceState fonksiyonu, Jetpack Compose’da state değerlerinin üretimini ve tüketimini yönetmek için kullanılır. Bu fonksiyon, bir state değeri ile birlikte bir coroutinescope döndürmek için kullanılan bir fonksiyondur. MutableState sınıfı, bir değiştirilebilir state değerini temsil eder. Bu değer, üretici tarafından değiştirilir ve tüketici tarafından okunur.
Örneğin, bir uygulama geliştirirken, kullanıcının seçtiği renge göre bir arka plan rengini değiştirmek istediğinizi düşünelim. Bu, kullanıcının seçimini bir değişken olarak tutup, UI üzerinde durumunu takip etmeniz gereken bir işlemdir ve produceState özelliği bu işlemi yönetmenize yardımcı olabilir. Bu örneği kod üzerinde inceleyelim🕵️.
Bu kod parçasında, produceState kullanılarak backgroundColor mutableStateOf nesnesi oluşturulur. Bu nesne, kullanıcının seçtiği renge göre arka plan rengini değiştirir. produceState, arka plandaki hesaplamaların asenkron olarak yapılmasına olanak tanır ve bu da performans artışına yol açabilir.
Ayrıca, produceState kullanılarak oluşturulan nesne, bir akış nesnesi olarak işlev görür ve bu nedenle stateFlow.collect {} bloğu içinde kullanılabilir. Örneğin, arka plan renginin değiştiği her seferinde bir mesaj göstermek istiyorsanız, stateFlow.collect {} bloğunda bu mesajı işleyebilirsiniz.
ProduceState özelliği, uygulamanızda dinamik durum yönetimi gerektiğinde kullanabileceğiniz çok güçlü bir özelliktir. Yukarıdaki örnek, durum yönetimi için küçük ama güçlü bir kullanım sunmaktadır.
DerivedStateOf
DerivedStateOf, belirli bir girdi durumuna (state) dayalı olarak türetilen bir durum nesnesi (state object) oluşturmayı sağlar. Bu özellik, birden çok durumun birbirine bağlı olduğu durumlarda kullanışlıdır.
DerivedStateOf, girdi olarak bir veya birden fazla state nesnesi alan bir lambda fonksiyonu olarak davranır. Lambda fonksiyonu, girdi state’lerinden bir veya birkaçını kullanarak yeni bir türetilmiş state nesnesi oluşturur.
Bir örnek yapalım ve bir ürün listesinin farklı şekillerde sıralanışını ve bu sıralamaya göre arka plan renklerinin değişmesini sağlayan bir uygulama yapalım. Bu örnekte ürün listesi ile ürünlerin sıralanabileceği ihtimalleri tutan değişken birbirlerine bağımlıdırlar. Önce örneğimize bakalım sonra da sizlere bunu açıklayayım.
SortedItems state nesnesi, derivedStateOf kullanılarak sortOrder ve items state nesnelerinden türetilir. sortedItems değişkeni, sortOrder veya items değiştiğinde otomatik olarak güncellenir ve yeni sıralama düzenine göre öğeleri sıralar.
Ayrıca, her bir öğenin arkaplan rengi, sortedItems state nesnesine bağlı olarak belirlenir. Böylece, öğelerin sıralama düzeni değiştirildiğinde, arkaplan renkleri de otomatik olarak güncellenir.
Bu örnekte, derivedStateOf fonksiyonu, birden çok state nesnesinin birbirine bağımlı olduğu durumlar için kullanılabilecek güçlü bir özelliktir. Uygulamanızda benzer durumlarla karşılaşırsanız, derivedStateOf kullanarak daha temiz ve modüler kod yazabilirsiniz.
Snapshotflow
SnapshotFlow, akışları (flow) kullanarak önceki ve mevcut arasındaki farkı hesaplamak için kullanılır. SnapshotFlow, Compose tarafından sağlanan bir yardımcı sınıftır ve state nesnelerini izleyen akışlar oluşturmak için kullanılabilir.
SnapshotFlow, bir akışı subscribe ederken mevcut durumun bir snapshot’ını alır ve daha sonra bu durumun değişip değişmediğini izler. Eğer durum değişirse, yeni bir snapshot alır ve bu yeni snapshot ile önceki snapshot arasındaki farkı hesaplar. Bu sayede, sadece değişen kısımların yeniden çizilmesi sağlanarak uygulamanın performansı artırılabilir.
Sizinle birlikte bir renk seçme paleti uygulaması yapalım ve paletten her renk seçtiğimizde bu seçilen rengi arkaplan rengi olarak ayarlayalım.
Bu örnekte, ColorPicker adlı bir komponent oluşturulur. selectedColor adlı bir mutableState nesnesi, seçilen rengi tutar.
snapShotFlow kullanılarak, selectedColor state nesnesine bağımlı bir akış oluşturulur. Bu akış, seçilen renklerin bir akışa dönüştürülmesiyle oluşturulur. collectAsState fonksiyonu kullanılarak, son seçilen renk state nesnesinde saklanır. Bu nesne, arka plan rengi olarak kullanılır.
Box komponenti, lastSelectedColor nesnesi kullanılarak arka plan rengi olarak ayarlanır. Ayrıca, tıklanabilir hale getirilir ve her tıklamada listedeki bir sonraki rengi seçer.
Bu örnek, SnapshotFlow’un statik bir liste yerine dinamik bir veri kaynağından renkler almak için kullanımını gösterir.
Sonuç
Bu yazı ile birlikte serimizin sonuna geldik. Uygulamalarımızı yaparken aslında ufak yapısal oyunlar ile akıcılığını arttırabileceğimizi göstermeye çalıştım sizlere. Biz geliştiriciler, uygulamalarımızı test ederken onların kusurlarını bildiğimiz konularda temkinli davranır ve çoğu zaman o kusurları gidermekte pasif davranırız🤦♂️. Ama gerçek hayatta işler böyle yürümez ve kullanıcı sizin beklediğiniz gibi arka planda inen veriyi beklemez. Bu durumlar çoğu zaman bizlere hayal kırıcı geri dönüşler olarak gelir. Çünkü geliştirici olarak bizler de aslında oradaki hantal yapıyı biliriz. İşte bu gibi durumlardan kaçabilmemiz için bu konunun bizlere büyük faydası olacağını düşünüyorum. Umarım sizde beğenmişsinizdir. Hoşçakalın, bir başka seride görüşmek üzere🙋♂️.
