Arkadaşlar merhaba, uzun süredir uğraştığım bir projede React ile birlikte Tailwind kullanıyorum. Özellikle sol tarafta yer alan yan menü (sidebar) konusunda bir performans takıntısı oluştu bende. Menüde yaklaşık 40-50 arası öğe var ve her birine açılır/kapanır alt menüler ekledim. İlk bakışta Tailwind'in utility-first yapısıyla çok temiz görünüyor ama sayfa içinde gezinirken veya menü öğelerine tıkladığımda belirgin bir takılma hissediyorum. Özellikle menü açılıp kapanırken geçiş animasyonları sırasında frame drop'lar yaşıyorum.
Ben şu ana kadar birkaç yöntem denedim. İlk olarak menü öğelerini `React.memo` ile sarmaladım ve gereksiz re-renderların önüne geçmeye çalıştım. Ayrıca alt menülerin açık/kapalı durumlarını Context API yerine `useReducer` ile yönetmeye başladım. Yine de özellikle menüde hızlıca gezinirken veya birden fazla alt menüyü aynı anda açıp kapatmaya çalıştığımda performansın düştüğünü görüyorum. Tailwind'in derleme anında ürettiği CSS sınıflarının burada bir darboğaz yaratıp yaratmadığından emin değilim. Belki de CSS transition'ları yerine JS tabanlı animasyon kütüphaneleri mi kullanmalıyım?
Sizce bu tür bir yan menüde performansı artırmak için hangi yaklaşımları önerebilirsiniz? Özellikle Tailwind ile birlikte `transition` ve `transform` gibi özellikleri kullanırken dikkat edilmesi gereken püf noktalar var mı? Bir de menü öğelerinin sayısı arttıkça virtual list gibi tekniklere geçmek mantıklı olur mu? Kendi projelerinizde benzer sorunlarla karşılaştıysanız nasıl çözdüğünüzü merak ediyorum. CSS tarafında will-change veya hardware acceleration ile ilgili bir tavsiyeniz var mı? Şimdiden teşekkürler, her türlü fikre açığım.
Ben şu ana kadar birkaç yöntem denedim. İlk olarak menü öğelerini `React.memo` ile sarmaladım ve gereksiz re-renderların önüne geçmeye çalıştım. Ayrıca alt menülerin açık/kapalı durumlarını Context API yerine `useReducer` ile yönetmeye başladım. Yine de özellikle menüde hızlıca gezinirken veya birden fazla alt menüyü aynı anda açıp kapatmaya çalıştığımda performansın düştüğünü görüyorum. Tailwind'in derleme anında ürettiği CSS sınıflarının burada bir darboğaz yaratıp yaratmadığından emin değilim. Belki de CSS transition'ları yerine JS tabanlı animasyon kütüphaneleri mi kullanmalıyım?
Sizce bu tür bir yan menüde performansı artırmak için hangi yaklaşımları önerebilirsiniz? Özellikle Tailwind ile birlikte `transition` ve `transform` gibi özellikleri kullanırken dikkat edilmesi gereken püf noktalar var mı? Bir de menü öğelerinin sayısı arttıkça virtual list gibi tekniklere geçmek mantıklı olur mu? Kendi projelerinizde benzer sorunlarla karşılaştıysanız nasıl çözdüğünüzü merak ediyorum. CSS tarafında will-change veya hardware acceleration ile ilgili bir tavsiyeniz var mı? Şimdiden teşekkürler, her türlü fikre açığım.