React'ta state yönetimi nasıl optimize edilir?

18 Tem 15:17

React’ta state yönetimini optimize ederken Vue 3’in Composition API’siyle yaptığım karşılaştırmadan yola çıkarak aslında hangi aracın kullanıldığından ziyade tasarımın önem taşıdığını görüyorum. Vue 3’te reactivity sistemiyle parçalı state tanımak ve `shallowRef` gibi optimizasyonları devreye almak performans kazancı sağlarken, React’ta buna karşılık gelen strateji `useMemo` ve `useCallback` ile gereksiz re-render’ları kısıtlamak. Global state’e geçildiği durumda da React’ın Context API’sı Vue’un `provide/inject` sistemine benzer şekilde çalışıyor; fakat Context’te fazla sayıda state’in yer aldığı durumlarda Vue’un pinia’da olduğu gibi modüler store yapılarına yönelmek gerekiyor. Temelde her iki ekosistemde de "state’in mümkün olduğunca daraltılması, sadece gerekli yerlerde paylaşılması ve bağımlılıkların minimize edilmesi" ortak prensibi öne çıkıyor.

18 Tem 15:49

State yönetimi optimizasyonunda React'ın temel tasarım ilkelerini anlamak kritik. İlk olarak, lokal state'in tercih edildiği durumlara odaklanalım: küçük bileşenler ve geçici veriler için `useState`/`useReducer` ideal. Ölçeklenebilir uygulamalarda global state'e geçmek kaçınılmaz olsa da, performans için *selektif* global state kullanımı şart. Örneğin, 1000 bileşenin aynı veriyi okuduğu durumlarda, gereksiz re-render'ları önlemek için `React.memo` ve `useMemo` gibi optimizasyon araçlarını devreye sokmak gerekiyor. Global state yönetimindeyse Redux, Zustand, Jotai gibi kütüphanelerin performans özelliklerini karşılaştırmak önemli. Redux'un `reselect` ile selector'ları optimize etmesi veya Zustand'un atomik state güncellemeleri gibi yaklaşımlar, gereksiz state karşılaştırmalarını ve re-render'ları minimize ediyor. Burada dikkat edilmesi gereken nokta, *state'in ne kadar büyük ve sık değiştiği*. Örneğin, kullanıcı oturum bilgileri gibi nadiren değişen veriler global state'te saklanırken, forma ait geçici girdiler lokal state'te tutulmalı. Son olarak, React 18'in getirdiği özelliklerden faydalanmak da performansı ciddi anlamda etkiliyor. Örneğin, `startTransition` ve `useDeferredValue` ile kullanıcı arayüzündeki ani değişiklikleri yavaşlatabilir, böylece tarayıcının ana thread'ini bloke etmekten kaçınılabilir. Ayrıca, sunucu tarafında state'i senkronize eden Next.js gibi framework'lerde `use` hook'larıyla daha akıllı state yönetimi mümkün oluyor. Unutmayın: optimizasyon, durumun gerektirdiği yerde *minimum* state yönetimiyle başlar, gereksiz globalizasyona kaçmamak gerekiyor.

18 Tem 17:05

Konuya bir yere kadar dediğin gibi karar verdim aslında — local state’le başladıysam da daha sonraları birkaç projede global state kullanmaya yöneldim. Diyelim ki bir dashboard uygulaması yaptım eskiden; her bileşende state’i prop drilling’le dolaştırmaya çalıştığımda performans git gide düştü, özellikle de API’den gelen verilerin güncellenmesiyle. Sonra Redux Toolkit’i denedim ve bu biraz rahatladı ama yine de bir miktar boilerplate var. En son Context API + useReducer kombosuyla yol aldım ve performansı optimize etmek kolaylaştı — gereksiz re-render’lardan kurtuldum. Küçük projelerde local state hâlâ kral tabii, ama ölçeği büyüdükçe global state’in kontrollü kullanımı kaçınılmaz oluyor. Bence temel kural: state’in kirli olabileceği yerlerde global state kullan, yoksa basit componentler local’da kalıyor. Her projede deneme yapmak lazım, neyin patlak vereceğini bilemiyorsun.

18 Tem 19:15

Miniproje yaptığımızda aslında global state’i biraz fazla kullanınca ekran render’larında gereksiz yere 5-6 kez update almıştık. Sonunda lokal state ile gerekli olan sadece komponentin own state’i olunca render sayısı yarıya indi.