React Lazy ve Suspense
Javascript frameworkleri ile uygulama geliştirmek oldukça keyifli. Ancak dikkat etmemiz gereken bir çok bileşen var. Örneğin performans yada güvenlik.
Bu yazımın konusu performans.
Nesne temelli dillerde durum farklı. Performans önemli ancak bazı durumlarda dilin kendisi yardımcı oluyor. React gibi dillerde durum farklı. Performans optimizasyonlarını kodu geliştirirken bizim yapmamız gerekiyor. Düşünsenize büyük bir web uygulamanız var ve onlarca componentten oluşuyor. Ve sayfaların çoğu ağır veri işleri yapıyor.
React geliştiricileri bu gibi durumlar için Lazy ve suspens’i geliştirmiş.
Özellikle şu 3 satır önemli
import Welcome from ‘../components/Welcome’;const User = React.lazy(() => import (‘../components/user’));const Cars = React.lazy(() => import(‘../components/cars’));
Welcome componentini bildiğimiz şekliyle yüklüyoruz. Ama sonraki iki satırda React.lazy() metodunu kullanarak tanımlamaları yapıyoruz.
Peki Lazy metodu ne yapıyor ?
Şöyle düşünelim; Component tanımlamarını yapıyoruz. Ancak biz kullanıncaya kadar yüklenmiş olarak bekliyor. Bu durum performans kaybına neden oluyor. Düşünsenize 10'larca component yüklüyorsunuz ancak siz kullanana kadar performans üzerinde olumsuz etki etmeye devam ediyor.
Lazy ile tanımlama yaparak performans etkisini azaltıyoruz.
Peki Suspense ?
Componentin yüklenmesi sırasında aldığı tek özellik olan fallback içindeki işlemi yapar. Örneğimizde olduğu gibi “yükleniyor“ mesajı gösterebiliriz. Suspense yapısını route içinde kullandık. Ancak isterseniz component kullanımı yaptığınız herhangi bir bölgede de kullanabilirsiniz.
Suspense, SuspenseList içinde kullanılabilir. RevealOrder içindeki componentlerin nasıl yüklemesi gerektiğini gösterir. Şöyle ki parametre değerini together yaparsak. Liste içindeki tüm componentler yüklenmeden gösterim yapılmayacaktır. Detaylı olarak incelemek isterseniz aşağıdaki linkten faydalanabilirsiniz.
