Arkadaşlar selam, uzun zamandır React ile uğraşıyorum ama özellikle state yönetimi konusunda can sıkıcı bir performans sorunuyla karşılaştım. Projede bileşen ağacı biraz büyüdü, bir üst seviyedeki state değişikliği tüm alt bileşenlerin yeniden render olmasına yol açıyor. useMemo ve React.memo kullanmama rağmen, özellikle liste içeren bileşenlerde (belki 200-300 eleman) ani gecikmeler oluyor. Acaba Context API mi yetersiz kalıyor, yoksa Redux gibi bir kütüphaneye mi geçmeliyim? Bu konuda deneyimi olan var mı?
Bir de şu durum var: State'i olabildiğince aşağı çekmeye çalışıyorum, yani her bileşenin sadece kendi ihtiyacı olan veriyi tutmasını sağlıyorum. Ama bazen iki kardeş bileşen aynı veriye ihtiyaç duyuyor, o zaman ister istemez ortak bir üst bileşende state tutmak gerekiyor. İşte bu noktada o üst bileşenin altındaki her şey yeniden render oluyor. useCallback ile fonksiyon referanslarını sabitlesem de, özellikle obje veya dizi türündeki state'lerde işler karışıyor. Sizce bu tarz durumlarda atom tabanlı state yönetimleri (Recoil, Jotai gibi) daha mı iş görür? Yoksa Redux Toolkit ile normalized state yapısı mı kurmalıyım?
Son olarak, performansı ölçmek için React Developer Tools'taki Profiler'ı kullanıyorum, ama bazen gereksiz render'ları yakalamak yeterli olmuyor. Mesela bir input alanına yazı yazarken, sadece o input değişmeli ama tüm form bileşeni yeniden render oluyor. Kontrollü bileşenlerde bu kaçınılmaz mı? Belki de state'i lokal tutup, form submit anında mı toplamalıyım? Sizin bu konuda önerileriniz veya farklı yaklaşımlarınız var mı? Deneyimlerinizi paylaşırsanız çok sevinirim.
Bir de şu durum var: State'i olabildiğince aşağı çekmeye çalışıyorum, yani her bileşenin sadece kendi ihtiyacı olan veriyi tutmasını sağlıyorum. Ama bazen iki kardeş bileşen aynı veriye ihtiyaç duyuyor, o zaman ister istemez ortak bir üst bileşende state tutmak gerekiyor. İşte bu noktada o üst bileşenin altındaki her şey yeniden render oluyor. useCallback ile fonksiyon referanslarını sabitlesem de, özellikle obje veya dizi türündeki state'lerde işler karışıyor. Sizce bu tarz durumlarda atom tabanlı state yönetimleri (Recoil, Jotai gibi) daha mı iş görür? Yoksa Redux Toolkit ile normalized state yapısı mı kurmalıyım?
Son olarak, performansı ölçmek için React Developer Tools'taki Profiler'ı kullanıyorum, ama bazen gereksiz render'ları yakalamak yeterli olmuyor. Mesela bir input alanına yazı yazarken, sadece o input değişmeli ama tüm form bileşeni yeniden render oluyor. Kontrollü bileşenlerde bu kaçınılmaz mı? Belki de state'i lokal tutup, form submit anında mı toplamalıyım? Sizin bu konuda önerileriniz veya farklı yaklaşımlarınız var mı? Deneyimlerinizi paylaşırsanız çok sevinirim.