56 icindeki yorumda da belirtildigi uzere, uygulama ici re-render nedeni ile ortaya cikan performans sorununun iyilestirilmesi icin gerekli degisiklikleri ve cesitli kod optimizasyonlarini icerir.
Neden?
Uygulama genelinde ihtiyac duyulan degiskenlerin/degerlerin ortak bir yerden -source of truth- yonetilmesi icin olusturulan ve dogrudan uygulamayi wrap eden CommonStoreContext, guncellenen her bir deger icin sadece ihtiyac duyulan component'ler yerine Main Layout ve wrap ettigi componentlerin de re-render olmasina neden oluyor. Bu durum da uygulama performasini etkileyecek sonuclar doguruyor.
Nasil?
Yukaridaki nedenlerden dolayi ortaya cikan sorunlarin giderilmesi icin bahsetmis oldugum:
cozumleri uygulanarak, uygulamayi bir Provider ile wrap etmeye gerek kalmadan ve transiently subscription sayesinde de ihtiyac duyulanlar disindaki component'lerde re-render'e neden olmadan islemlerin gerceklestirilmesi saglandi.
Kod optimizasyonlari
Performans sorunlarinin giderilmesi disinda, asagidaki kod optimizasyonlarini da icerir:
_document.tsx sadece sunucu uzerinde calistirildigindan ve client (browser) da gereksiz DOM manipulasyonuna neden olmamak icin, Title ve viewport disindaki tum meta tag'ler _document.tsx'e tasindi.
Ozet
56 icindeki yorumda da belirtildigi uzere, uygulama ici
re-render
nedeni ile ortaya cikan performans sorununun iyilestirilmesi icin gerekli degisiklikleri ve cesitli kod optimizasyonlarini icerir.Neden?
Uygulama genelinde ihtiyac duyulan degiskenlerin/degerlerin ortak bir yerden -source of truth- yonetilmesi icin olusturulan ve dogrudan uygulamayi wrap eden
CommonStoreContext
, guncellenen her bir deger icin sadece ihtiyac duyulan component'ler yerineMain Layout
ve wrap ettigi componentlerin dere-render
olmasina neden oluyor. Bu durum da uygulama performasini etkileyecek sonuclar doguruyor.Nasil?
Yukaridaki nedenlerden dolayi ortaya cikan sorunlarin giderilmesi icin bahsetmis oldugum:
memo
kullanimiReact Context
yerine, hook-drivenzustand
implementasyonucozumleri uygulanarak, uygulamayi bir
Provider
ile wrap etmeye gerek kalmadan vetransiently subscription
sayesinde de ihtiyac duyulanlar disindaki component'lerdere-render
'e neden olmadan islemlerin gerceklestirilmesi saglandi.Kod optimizasyonlari
Performans sorunlarinin giderilmesi disinda, asagidaki kod optimizasyonlarini da icerir:
_document.tsx
sadece sunucu uzerinde calistirildigindan ve client (browser) da gereksiz DOM manipulasyonuna neden olmamak icin,Title
veviewport
disindaki tum meta tag'ler_document.tsx
'e tasindi.useInitApp
,useFetchData
,useTimerInterval
custom hook'lari olusturuldutheme
vecolor
degiskenlerilib
icerisinde ayri bir dosyaya tasindi. Boylece ihtiyac olunan yerlerde import edilerek kullanilabilir.genericStore
vetimerStore
adinda iki farkli store olusturularak, ihtiyac olan yerlerde sadece gerekli store'a ait state'lerin cagirilmasi saglandi.Sonuc
Yapilabilecekler
interval
'in durdurulmasi saglanabilir.