Server State vs UI State

Not: Bu yazıyı yazma nedenim, Redux kullanan kötü yazılmamış bir proje neredeyse görmememdir.

Server State kütüphaneleri web uygulamalarında oldukça sık tekrar edilen verilerin çekilmesini (Data fetching) basitleştirmek için tasarlanmıştır. Bu kütüphanelerle verileri çekme ve cachleme işlemleri için yazmanız gereken “boilerplate” koddan kolayca kurtulabilirsiniz.

Web uygulamalarında genellikle bir veriyi göstermek için server’dan veri çekeriz. Bu veri üzerinde bazen güncellemeler yapıp server’a geri gönderir ayrıca, web uygulamasındaki cachlenmiş verimizi server’la sekronize tutmaya çalışırız.

Web Uygulamalarında;

  • UI’da “Loader”, “Error” bileşeni göstermek için loading ve error state’ini yönetiriz.
  • Aynı veri için birden fazla request atmamaya çalışırız. (Örneğin uygulama içinde ziyaret ettiğiniz bir sayfaya geri döndüğünüzde veya bir isteğe bağlı butona ardıl şekilde n defa basma gibi durumlarda)
  • “Optimistic update” ile aksiyonların sonuçlarını daha hızlı göstermeye çalışırız.
  • Cache’in ömrünü kullanıcı etkileşimlerine göre yönetiriz.

Hangisini Ne zaman Kullanmalı?

UI State/Client State

  • Tema
  • Dil
  • Ortak Kullanılan kompleks UI state’ler vb. (Redux’a ihtiyacınız olduğunuzu anlarsınız, anlamıyorsanız muhtemelen ihtiyacınız yoktur.)

Server State

  • Backend servislerinden gelen veri (Async data)

Server State Kütüphanelerinin Avantajları

  • Cache ve server’dan veri çekmek için kendi Redux pattern’nınızı icat etmenize gerek kalmaz.
  • Redux’la iyi bir pattern yazamıyorsanız sizi büyük bir boilerplate koddan kurtarır.
  • Backend’den elde ettiğimiz veriyi birden fazla component’da birden fazla defa istek atmadan kolayca kullanabiliriz. Aynı cacheKey’i kullandığı için elde ettiğiniz veriyi “Prop Drilling” vb. yöntemlerle Child Component’lara “Pass etme” derdiniz kalmaz.
  • isPending, isError ve isSuccess gibi değişkenleri her istek için yönetmenize gerek kalmaz.
  • Pooling, Prefetching gibi işinizi kolaylaştırıcı fonksiyonları kolayca kullanabilirsiniz.
  • Kötü yazılmış koda göre çok daha iyi bir performans kazanırsınız.

Popüler Server State Kütüphaneleri

1- rtk-query
2- react-query
3- apollo

Kaynaklar:

1- https://redux-toolkit.js.org/rtk-query/overview
2- https://www.apollographql.com/docs/react/v2/performance/optimistic-ui/

--

--

--

Frontend developer and designer, science fiction enthusiast, practicing minimalism, and stoic in search of flow. Writing about design and code.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
A. Kürşat Uzun

A. Kürşat Uzun

Frontend developer and designer, science fiction enthusiast, practicing minimalism, and stoic in search of flow. Writing about design and code.

More from Medium

Update AntD Form errors with i18next in React

Creating Geofences with GeoJSON to Define Virtual Borders

[React] Event Capturing and Event Bubbling

Testing Ag-Grid React’s Custom Cell Renderer Component