1- Context API

React uygulamalarında kullanılan useReducer, useState ve Context API üzerinden bir performans optimizasyonu tartışması yapılıyor. Buradaki amaç, özellikle derin bileşen ağaçlarında (component trees) prop drilling yapmadan, yani belirli verileri birçok bileşenden geçirmeden, uygulamanın performansını optimize etmek. İşte detaylarıyla özet:

1. UseState ve UseReducer Karşılaştırması

• UseState: Genelde basit durum yönetimlerinde kullanılır, tek bir değeri doğrudan bir state olarak ayarlamak yeterlidir. Ancak karmaşık durumlarda, özellikle birçok veri işleniyorsa, yönetim zorlaşabilir.
• UseReducer: Karmaşık durum yönetimi gereken yerlerde tercih edilir. Tek bir “dispatch” ile tüm eylemleri yönetebilir, belirli durum güncellemeleri için bir “reducer” işlevi kullanır. Böylece bir bileşenin durumunu değiştirecek tüm işlemleri bir yerde toparlayıp test edilebilir hale getirir.
• Farkları: Aslında useState ve useReducer işlevsel olarak aynıdır. useState yalnızca daha basit ve tek değerli durumlardadır. Ancak daha karmaşık durum yönetimi ve daha çok işlem yapılan yerlerde useReducer daha iyi bir tercih olur. Bu kullanıcının kod düzenini de sadeleştirir ve test etmesini kolaylaştırır.

2. Context API Kullanımı

• Prop Drilling Sorunu: Uygulama içinde bazı verilerin, örneğin “dispatch” veya “setItems” gibi fonksiyonların derin bileşenlere aktarılmasının bir yolu olarak Context API kullanılmaktadır. Eğer çok fazla bileşenden geçiş yapılması gerekiyorsa, bu performans açısından zorluk yaratabilir. Çünkü tüm bileşenler aynı değeri tekrar tekrar almak zorunda kalır.
• Context API: Context, bir "gizli prop" olarak düşünülebilir. Ana bileşen içerisinde belirli bir veriyi "Context" ile oluşturduğunuzda, bu veri, alt bileşenlerde herhangi bir prop aktarma işlemi yapmadan kullanılabilir. Bu da özellikle derin bileşen ağaçlarında (38+ seviyeler) prop drilling ihtiyacını ortadan kaldırır.
• Örnek Veriler: Context API, örnekte ItemsProvider adıyla tanımlanan bir bileşenle sarılır. Bu sayede items ve dispatch gibi değerler alt bileşenlerde doğrudan kullanılabilir hale gelir.

3. Performans Optimizasyonu ve Kullanılan Teknikler

• Re-render Problemi: Context API kullanıldığında, Context içindeki herhangi bir değer değiştiğinde, onu kullanan her bileşen yeniden render edilir. Konuşmacının belirttiği gibi, Context "gizli bir prop" gibi davranır, bu yüzden bu değer değiştikçe bileşenler yeniden render olur.
• useMemo ve useCallback Kullanımı: useMemo ve useCallback hookları ile gereksiz render işlemlerinden kaçınılmaya çalışılır. Bu optimizasyonlar sayesinde bileşenlere iletilen prop’lar değişmediğinde bileşenler yeniden render edilmez.
• Sonuçlar: Ancak, Context API ile yapılan optimizasyonlarda bile bazı bileşenlerin beklenmedik şekilde yeniden render edildiği görülüyor. Bunun sebebi, Context’in temel olarak bir prop gibi davranması ve bu prop değiştiğinde bileşenlerin yeniden render edilmesine sebep olmasıdır. Bu yüzden, bazı durumlarda Context API’yi sınırlı sayıda kullanmak gerekebilir.

4. Pratik Öneriler ve Geliştirici Deneyimi

• Kod Temizliği: useReducer veya useState kullanımı arasında geçiş yapmak, bazı kodların basitleştirilmesini ve optimize edilmesini sağlar. Konuşmacı, gereksiz kodları temizlemenin, büyük bir kod tabanını anlamayı ve yönetmeyi kolaylaştırdığını vurguluyor.
• Eski Araçlar ve Yöntemler: Context API ve useReducer gibi modern çözümlerden önce, React Redux gibi araçlarla durum yönetimi yapılırdı. Ancak bu daha karmaşık bir süreçti. Özellikle mapStateToProps gibi işlemler zorluk çıkarabiliyordu.
• Hatırlatma ve Bilgi Birikimi: Konuşmacı, kendi deneyimlerinden yola çıkarak geliştirme sürecinde aynı hataları tekrar yapmaktan kaçınmak için “kodları yapıştırma” ve “önceki tecrübelerden öğrenme” gibi yöntemler kullanıyor.

Özetle