React projelerinde state yönetimi ile UI güncellemesi nasıl optimize edilir?

Arkadaşlar selam, son zamanlarda React projelerimde state yönetimi ve UI güncellemeleri arasındaki dengeyi kurmakta biraz zorlanıyorum. Özellikle büyüyen bir projede, gereksiz re-render'lar ve performans kaybı can sıkıcı olmaya başladı. Mesela bir liste bileşeninde her state değişikliğinde tüm liste yeniden render ediliyor, oysa sadece bir elemanın durumu değişiyor. useMemo ve useCallback ile bu işi biraz hafifletebiliyorum ama ne kadar doğru kullanıyorum emin değilim. Siz bu tür optimizasyonları nasıl yapıyorsunuz? Context API mi kullanıyorsunuz yoksa Redux gibi bir kütüphaneye mi yöneliyorsunuz?

Bir de küçük bir örnek üzerinden gitmek gerekirse, diyelim ki bir todo uygulaması yapıyoruz. Her bir todo öğesinin tamamlanma durumu, silme butonu veya düzenleme durumu gibi farklı state'leri var. Ben genelde her todo öğesini ayrı bir bileşen olarak alıp, sadece o bileşenin state'i değiştiğinde yeniden render olmasını sağlamaya çalışıyorum. Ama bazen parent bileşenin state'i güncellenince tüm çocuklar tetikleniyor. Bu durumda React.memo kullanmak işe yarıyor mu, yoksa daha farklı bir yaklaşım mı izlemeliyiz? Özellikle büyük listelerde virtual scrolling gibi teknikler deneyen oldu mu, performans artışı nasıl?

Son olarak, state yönetiminde immutable update kuralına ne kadar dikkat ediyorsunuz? Bazen küçük bir array işlemi için spread operator veya Object.assign kullanmak yerine doğrudan mutable bir değişiklik yapmak daha hızlı gibi geliyor ama sonra React'ın değişikliği algılayamadığı ve UI'ın güncellenmediği durumlar oluyor. Sizin bu konuda önerdiğiniz pratik ipuçları var mı? Ya da Immutable.js gibi bir kütüphane kullanmaya değer mi, yoksa vanilla JavaScript ile devam etmek daha mı sağlıklı? Deneyimlerinizi ve kullandığınız pattern'leri paylaşırsanız çok sevinirim.