fix(performance): Improve performance and replace global store with zustand - #56

[abdullahceylan]

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 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:

• ihtiyac olan yerlerde memo kullanimi
• React Context yerine, hook-driven zustand implementasyonu

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.
• useInitApp, useFetchData, useTimerInterval custom hook'lari olusturuldu
• theme ve color degiskenleri lib icerisinde ayri bir dosyaya tasindi. Boylece ihtiyac olunan yerlerde import edilerek kullanilabilir.
• genericStore ve timerStore adinda iki farkli store olusturularak, ihtiyac olan yerlerde sadece gerekli store'a ait state'lerin cagirilmasi saglandi.

Sonuc

oncesi	sonrasi

Yapilabilecekler

• Ek olarak Page Visibility API kullanilarak, arkaplandayken interval'in durdurulmasi saglanabilir.

[vercel[bot]]

@abdullahceylan is attempting to deploy a commit to the Ademilter Team on Vercel.

A member of the Team first needs to authorize it.