React uygulamalar\u0131 geli\u015ftik\u00e7e, bile\u015fenler aras\u0131 veri ak\u0131\u015f\u0131n\u0131 ve uygulaman\u0131n genel durumunu y\u00f6netmek karma\u015f\u0131k bir hal alabilir. Durum y\u00f6netimi (state management), bir React uygulamas\u0131n\u0131n kalbinde yer alan ve uygulaman\u0131n ne zaman, nerede ve nas\u0131l g\u00fcncellenece\u011fini belirleyen kritik bir konudur. Y\u0131llar i\u00e7inde bu alanda bir\u00e7ok farkl\u0131 yakla\u015f\u0131m ortaya \u00e7\u0131km\u0131\u015ft\u0131r: Bu makalede, React ekosisteminde son zamanlarda pop\u00fclerlik kazanan ve “React Values” olarak adland\u0131rabilece\u011fimiz, do\u011frudan JavaScript nesnelerini reaktif hale getirme felsefesine dayanan yeni nesil bir durum y\u00f6netimi yakla\u015f\u0131m\u0131n\u0131 inceleyece\u011fiz. \u00d6zellikle, bu yakla\u015f\u0131m\u0131n \u00f6nde gelen temsilcilerinden biri olan React’in durum y\u00f6netimi evrimi, geli\u015ftiricilerin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 sorunlara \u00e7\u00f6z\u00fcm bulma aray\u0131\u015f\u0131n\u0131n bir sonucudur. Her ne kadar temel yakla\u015f\u0131mlar belirli senaryolar i\u00e7in yeterli olsa da, uygulaman\u0131n boyutu ve karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a baz\u0131 k\u0131s\u0131tlamalar ortaya \u00e7\u0131kar.<\/p>\n React’in Redux ve MobX gibi \u00fc\u00e7\u00fcnc\u00fc taraf durum y\u00f6netimi k\u00fct\u00fcphaneleri, b\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k uygulamalar i\u00e7in g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcmler sunar. Redux, tek bir immutable durum a\u011fac\u0131, eylemler (actions), azalt\u0131c\u0131lar (reducers) ve se\u00e7iciler (selectors) gibi kat\u0131 bir mimari ile tutarl\u0131 ve tahmin edilebilir bir durum y\u00f6netimi sa\u011flar. MobX ise daha esnek, g\u00f6zlemlenebilir (observable) veriler ve reaktif programlama prensiplerine dayan\u0131r.<\/p>\n Ancak, bu k\u00fct\u00fcphanelerin her ikisi de \u00f6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli uygulamalar i\u00e7in a\u015f\u0131r\u0131ya ka\u00e7an bir \u00f6\u011frenme e\u011frisi ve “boilerplate” (kal\u0131p kod) gerektirebilir. Redux’ta bir durumu g\u00fcncellemek i\u00e7in eylem tan\u0131mlamalar\u0131, azalt\u0131c\u0131lar, dispatch fonksiyonlar\u0131 ve se\u00e7iciler yazmak gerekir. MobX daha az kal\u0131p kod gerektirse de, g\u00f6zlemleyiciler, eylemler ve tepkiler gibi kendine \u00f6zg\u00fc kavramlar\u0131 vard\u0131r. Bu karma\u015f\u0131kl\u0131k, geli\u015ftirme h\u0131z\u0131n\u0131 d\u00fc\u015f\u00fcrebilir ve \u00f6zellikle yeni ba\u015flayanlar i\u00e7in g\u00f6z korkutucu olabilir. Uygulaman\u0131n ihtiyac\u0131ndan daha karma\u015f\u0131k bir \u00e7\u00f6z\u00fcm kullanmak, gereksiz y\u00fck ve bak\u0131m maliyeti anlam\u0131na gelir.<\/p>\n Bu sorunlar, geli\u015ftiricileri daha basit, daha sezgisel ve daha az kal\u0131p kod gerektiren, ancak ayn\u0131 zamanda performansl\u0131 ve esnek yeni nesil durum y\u00f6netimi yakla\u015f\u0131mlar\u0131na y\u00f6neltmi\u015ftir. \u0130\u015fte tam da bu noktada, “React Values” felsefesini benimseyen k\u00fct\u00fcphaneler devreye girer.<\/p>\n “React Values” terimi, React ekosisteminde belirli bir API’yi de\u011fil, daha \u00e7ok belirli bir durumu y\u00f6netme felsefesini ifade eder: D\u00fcz JavaScript nesnelerini (plain JavaScript objects) durum olarak kullanmak ve bu nesneleri reaktif hale getirerek, yaln\u0131zca ilgili k\u0131s\u0131mlar\u0131 de\u011fi\u015fti\u011finde bile\u015fenlerin yeniden olu\u015fturulmas\u0131n\u0131 sa\u011flamak. Bu felsefenin en ba\u015far\u0131l\u0131 ve pop\u00fcler uygulamalar\u0131ndan biri de 1. D\u00fcz JavaScript Nesneleri:<\/strong> Durumunuzu karma\u015f\u0131k s\u0131n\u0131flar, eylemler veya azalt\u0131c\u0131lar yerine, bildi\u011finiz ve sevdi\u011finiz d\u00fcz JavaScript nesneleri olarak tan\u0131mlay\u0131n. Bu yakla\u015f\u0131m, geli\u015ftiricilerin daha az kod yazmas\u0131na, daha az soyutlama ile u\u011fra\u015fmas\u0131na ve daha \u00e7ok i\u015f mant\u0131\u011f\u0131na odaklanmas\u0131na olanak tan\u0131r.<\/p>\n \u015eimdi, Burada Durumu g\u00fcncellemek, Bu kadar basit! Durum nesnesi \u00fczerindeki herhangi bir do\u011frudan de\u011fi\u015fiklik, Durumu bir React bile\u015feninde kullanmak i\u00e7in useState<\/code> ve useReducer<\/code> gibi temel React hook’lar\u0131, Context API<\/code> gibi yerle\u015fik \u00e7\u00f6z\u00fcmler ve Redux, MobX, Zustand gibi \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphaneler. Her birinin kendine g\u00f6re avantajlar\u0131 ve dezavantajlar\u0131 bulunsa da, \u00e7o\u011fu zaman geli\u015ftiricileri “fazla m\u0131 karma\u015f\u0131k?” veya “yeterince esnek mi?” gibi sorularla ba\u015f ba\u015fa b\u0131rakm\u0131\u015ft\u0131r.<\/p>\nvaltio<\/code> k\u00fct\u00fcphanesi \u00fczerinden, bu metodolojinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, geleneksel y\u00f6ntemlere k\u0131yasla sundu\u011fu avantajlar\u0131 ve hangi senaryolarda tercih edilmesi gerekti\u011fini detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Amac\u0131m\u0131z, geli\u015ftiricilere daha basit, daha sezgisel ve daha performansl\u0131 bir durum y\u00f6netimi deneyimi sunan bu modern yakla\u015f\u0131m\u0131 tan\u0131tmak ve React uygulamalar\u0131n\u0131zda durum y\u00f6netimini kolayla\u015ft\u0131rman\u0131n yollar\u0131n\u0131 g\u00f6stermektir.<\/p>\nGeleneksel Yakla\u015f\u0131mlar\u0131n Ortaya \u00c7\u0131kard\u0131\u011f\u0131 Sorunlar<\/h3>\n
useState<\/code> ve useReducer<\/code> ile Prop Drilling<\/h4>\nuseState<\/code> ve useReducer<\/code>, React bile\u015fenlerinin kendi i\u00e7 durumlar\u0131n\u0131 y\u00f6netmek i\u00e7in harika ara\u00e7lard\u0131r. Ancak, bir durumu birden fazla bile\u015fen aras\u0131nda payla\u015fmak gerekti\u011finde, \u00f6zellikle de bu bile\u015fenler bile\u015fen a\u011fac\u0131nda birbirinden uzak oldu\u011funda, “prop drilling” (prop delme) ad\u0131 verilen bir sorunla kar\u015f\u0131la\u015f\u0131l\u0131r. Prop drilling, bir veriyi, o veriyi do\u011frudan kullanmayan ara bile\u015fenler \u00fczerinden ge\u00e7irme zorunlulu\u011fudur. Bu durum, kodun okunabilirli\u011fini azalt\u0131r, bak\u0131m\u0131 zorla\u015ft\u0131r\u0131r ve bile\u015fenlerin yeniden kullan\u0131labilirli\u011fini olumsuz etkiler. Her ne kadar useContext<\/code> hook’u bu soruna bir \u00e7\u00f6z\u00fcm sunsa da, kendi i\u00e7inde ba\u015fka zorluklar\u0131 beraberinde getirir.<\/p>\nContext API ve Gereksiz Yeniden Olu\u015fturmalar<\/h4>\n
Context API<\/code>‘si, prop drilling sorununu \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bir ba\u011flam sa\u011flay\u0131c\u0131s\u0131 (Context Provider) arac\u0131l\u0131\u011f\u0131yla t\u00fcm alt bile\u015fenlere veri aktar\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Ancak Context API<\/code>‘nin \u00f6nemli bir dezavantaj\u0131 vard\u0131r: Bir Context<\/code> i\u00e7indeki de\u011fer de\u011fi\u015fti\u011finde, o Context<\/code>‘i t\u00fcketen t\u00fcm bile\u015fenler, o de\u011ferin sadece bir k\u0131sm\u0131n\u0131 kullan\u0131yor olsalar bile yeniden olu\u015fturulur (re-render). Bu, \u00f6zellikle b\u00fcy\u00fck ve s\u0131k g\u00fcncellenen ba\u011flamlarda performans sorunlar\u0131na yol a\u00e7abilir. React.memo<\/code> veya useMemo<\/code> gibi optimizasyon teknikleri kullan\u0131lsa bile, bu durum Context API<\/code>‘nin do\u011fas\u0131nda var olan bir zorluktur ve karma\u015f\u0131k durumlar i\u00e7in her zaman en verimli \u00e7\u00f6z\u00fcm olmayabilir.<\/p>\nRedux ve MobX Gibi Harici K\u00fct\u00fcphanelerin Karma\u015f\u0131kl\u0131\u011f\u0131<\/h4>\n
React Values Felsefesini Tan\u0131yal\u0131m: Valtio \u00d6rne\u011fi<\/h3>\n
valtio<\/code> k\u00fct\u00fcphanesidir.<\/p>\nvaltio<\/code>, durum y\u00f6netimini basitle\u015ftirmek i\u00e7in JavaScript’in Proxy nesnesinden yararlan\u0131r. Temel amac\u0131, geli\u015ftiricilerin durumlar\u0131n\u0131 do\u011frudan JavaScript nesneleri gibi manip\u00fcle etmelerine olanak tan\u0131rken, arka planda React’in yeniden olu\u015fturma mekanizmas\u0131n\u0131 ak\u0131ll\u0131ca optimize etmektir.<\/p>\nValtio’nun Temel Felsefesi<\/h4>\n
valtio<\/code>‘nun temel felsefesi olduk\u00e7a basittir:<\/p>\n
\n2. Do\u011frudan Mutasyon:<\/strong> Durumu g\u00fcncellemek i\u00e7in setState<\/code> veya dispatch<\/code> gibi \u00f6zel fonksiyonlara ihtiyac\u0131n\u0131z yok. Durum nesnesinin \u00f6zelliklerini do\u011frudan de\u011fi\u015ftirin (mutate edin).
\n3. Otomatik Reaktivite:<\/strong> valtio<\/code>, Proxy nesneleri sayesinde durum nesnesindeki de\u011fi\u015fiklikleri otomatik olarak alg\u0131lar ve yaln\u0131zca ilgili bile\u015fenlerin yeniden olu\u015fturulmas\u0131n\u0131 tetikler. Bu, Context API<\/code>‘nin aksine, gereksiz yeniden olu\u015fturmalar\u0131 en aza indirir.
\n4. Minimal API:<\/strong> \u00d6\u011frenilecek \u00e7ok az API vard\u0131r, bu da geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve k\u00fct\u00fcphaneyi yeni ba\u015flayanlar i\u00e7in bile eri\u015filebilir k\u0131lar.<\/p>\nValtio ile Durum Y\u00f6netimi Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n
valtio<\/code>‘nun temel \u00f6zelliklerini ve bir React uygulamas\u0131nda nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyelim.<\/p>\n1. Durum (Store) Olu\u015fturma<\/h4>\n
valtio<\/code> ile bir durum olu\u015fturmak son derece basittir. Tek yapman\u0131z gereken, durumunuzu temsil eden bir JavaScript nesnesini proxy<\/code> fonksiyonuna iletmektir:<\/p>\n\/\/ store.js\nimport { proxy } from 'valtio';\n\nconst appState = proxy({\n count: 0,\n text: 'Merhaba Valtio!',\n user: {\n name: 'John Doe',\n age: 30,\n },\n items: [],\n});\n\nexport default appState;<\/code><\/pre>\nappState<\/code>, uygulaman\u0131z\u0131n global durumunu temsil eden bir proxy nesnesidir. Bu nesneyi istedi\u011finiz kadar karma\u015f\u0131k yapabilirsiniz, i\u00e7 i\u00e7e nesneler ve diziler i\u00e7erebilir.<\/p>\n2. Durumu G\u00fcncelleme<\/h4>\n
valtio<\/code>‘nun en cazip \u00f6zelliklerinden biridir. Redux’taki gibi eylem tan\u0131mlar\u0131 veya azalt\u0131c\u0131lar yazman\u0131za gerek yoktur. Durum nesnesinin \u00f6zelliklerini do\u011frudan de\u011fi\u015ftirerek (mutate ederek) g\u00fcncelleyebilirsiniz:<\/p>\n\/\/ store.js (devam)\n\nexport const increment = () => {\n appState.count++;\n};\n\nexport const decrement = () => {\n appState.count--;\n};\n\nexport const updateText = (newText) => {\n appState.text = newText;\n};\n\nexport const updateUserAge = (newAge) => {\n appState.user.age = newAge; \/\/ \u0130\u00e7 i\u00e7e nesneleri do\u011frudan g\u00fcncelleyebilirsiniz\n};\n\nexport const addItem = (item) => {\n appState.items.push(item); \/\/ Dizilere do\u011frudan eleman ekleyebilirsiniz\n};<\/code><\/pre>\nvaltio<\/code> taraf\u0131ndan alg\u0131lan\u0131r.<\/p>\n3. Bile\u015fenlerde Durumu T\u00fcketme<\/h4>\n
useSnapshot<\/code> hook’unu kullan\u0131r\u0131z. Bu hook, proxy nesnesinin bir anl\u0131k g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc (snapshot) al\u0131r ve yaln\u0131zca eri\u015filen \u00f6zellikler de\u011fi\u015fti\u011finde bile\u015fenin yeniden olu\u015fturulmas\u0131n\u0131 tetikler.<\/p>\n\/\/ Counter.jsx\nimport React from 'react';\nimport { useSnapshot } from 'valtio';\nimport appState, { increment, decrement } from '.\/store';\n\nfunction Counter() {\n const snap = useSnapshot(appState); \/\/ appState'in anl\u0131k g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc al\n\n console.log('Counter bile\u015feni yeniden olu\u015fturuldu.');\n\n return (\n Saya\u00e7: {snap.count}<\/h3>\n