React projemdeki animasyonlar neden gecikmeli çalışıyor, çözüm var mı?

Arkadaşlar merhaba, son zamanlarda React ile geliştirdiğim bir projede animasyonlarla ilgili can sıkıcı bir sorun yaşıyorum. Özellikle sayfa geçişlerinde ve bazı UI elemanlarının görünüp kaybolmasında belirgin bir gecikme var. Normalde CSS transition veya keyframe kullanarak basit fade-in, slide-up gibi animasyonlar yapıyorum ama tarayıcıda sanki bir tıkanma oluyor, animasyon başlamıyor veya birkaç saniye sonra aniden tamamlanıyor. React’in kendi state yönetimiyle mi ilgili yoksa benim kullandığım kütüphanelerden mi kaynaklanıyor emin değilim. Özellikle listedeki elemanlar sırayla animasyonlanırken bir gecikme oluyor, sanki her eleman render edilirken bir bekleme süresi var gibi.

Bunu çözmek için React.memo ve useMemo ile gereksiz render’ları engellemeye çalıştım, hatta CSS’de will-change property’sini ekledim ama pek bir faydasını görmedim. Bir de bazı animasyonları JavaScript ile requestAnimationFrame kullanarak yapmayı denedim ama bu sefer de performans düşüklüğü yaşadım. Acaba bu gecikme React’in fiber mimarisiyle mi alakalı? Mesela useEffect içinde tetiklediğim animasyonlar sanki bir kuyruğa takılıyor gibi hissediyorum. Özellikle büyük state değişikliklerinde (örneğin bir liste filtrelendiğinde) animasyonlar tamamen donuyor veya çok yavaş çalışıyor.

Bu konuda tecrübesi olan var mı? Belki React’te animasyonları optimize etmek için bilmediğim bir yöntem vardır. Framer Motion, react-spring gibi kütüphaneleri denemeyi düşünüyorum ama projeye ekstra bağımlılık eklemek istemiyorum. Sizce bu gecikme sorunu hangi sebeplerden kaynaklanıyor olabilir? Kendi projelerinizde benzer bir sorun yaşadıysanız nasıl çözdünüz? Özellikle CSS animasyonlarıyla mı devam etmeliyim yoksa JavaScript tabanlı bir kütüphaneye mi geçmeliyim? Yorumlarınızı merakla bekliyorum.