{"id":33988,"date":"2025-11-09T17:32:15","date_gmt":"2025-11-09T14:32:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/valtio-nedir-ve-proxy-mekanizmasi-nasil-calisir\/"},"modified":"2025-11-09T17:32:15","modified_gmt":"2025-11-09T14:32:15","slug":"valtio-nedir-ve-proxy-mekanizmasi-nasil-calisir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/valtio-nedir-ve-proxy-mekanizmasi-nasil-calisir\/","title":{"rendered":"Valtio Nedir ve Proxy Mekanizmas\u0131 Nas\u0131l \u00c7al\u0131\u015f\u0131r?"},"content":{"rendered":"
Valtio Proxy Sorunu: \u00c7oklu Valtio App’i Nas\u0131l Bozdu?<\/div>\n

Modern web uygulamalar\u0131 geli\u015ftirirken, durum y\u00f6netimi (state management) karma\u015f\u0131k bir hal alabilir. \u00d6zellikle Valtio<\/a> gibi proxy tabanl\u0131 \u00e7\u00f6z\u00fcmler kullan\u0131rken, \u00e7oklu instance’lar\u0131n uygulaman\u0131zda beklenmedik hatalara yol a\u00e7t\u0131\u011f\u0131 “Missing Proxy” sendromuyla kar\u015f\u0131la\u015fabilirsiniz. Bu makale, bu sorunun k\u00f6k nedenlerini, ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 ve kesin \u00e7\u00f6z\u00fcm yollar\u0131n\u0131 ad\u0131m ad\u0131m inceliyor.<\/p>\n

Valtio, React i\u00e7in tasarlanm\u0131\u015f, basit ve performans\u0131 y\u00fcksek bir durum y\u00f6netimi k\u00fct\u00fcphanesidir. Temelinde JavaScript Proxy<\/a> objelerini kullanarak, state’inizi do\u011frudan de\u011fi\u015ftirebilmenize (mutable) olanak tan\u0131rken, de\u011fi\u015fiklikleri otomatik olarak alg\u0131lar ve ilgili bile\u015fenleri yeniden render eder. Geleneksel React durum y\u00f6netimi yakla\u015f\u0131mlar\u0131 genellikle de\u011fi\u015fmezlik (immutability) ilkesine dayan\u0131r; yani bir state’i de\u011fi\u015ftirmek istedi\u011finizde, onun yeni bir kopyas\u0131n\u0131 olu\u015fturman\u0131z gerekir. Valtio ise bu paradigmay\u0131 k\u0131rarak, t\u0131pk\u0131 bir class bile\u015fenindeki this.setState<\/code> gibi, state objesini do\u011frudan mutate etmenize izin verir.<\/p>\n

Peki bu “Proxy” mekanizmas\u0131 tam olarak ne anlama geliyor? JavaScript’teki Proxy objesi, di\u011fer objelerin temel operasyonlar\u0131n\u0131 (\u00f6rne\u011fin \u00f6zellik eri\u015fimi, atama, fonksiyon \u00e7a\u011fr\u0131s\u0131) yakalamak ve \u00f6zelle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Valtio, proxy()<\/code> fonksiyonu ile olu\u015fturdu\u011funuz her state objesini bir Proxy objesiyle sarar. Bu sarmalama i\u015flemi sayesinde, state \u00fczerinde yap\u0131lan her okuma ve yazma i\u015flemi Valtio taraf\u0131ndan izlenebilir hale gelir. Bir bile\u015fen, useSnapshot<\/code> hook’u ile bu state’i dinledi\u011finde, asl\u0131nda Proxy’nin “tuza\u011f\u0131na” (trap) tak\u0131lm\u0131\u015f olur. State \u00fczerinde herhangi bir de\u011fi\u015fiklik yap\u0131ld\u0131\u011f\u0131nda, Proxy bu de\u011fi\u015fikli\u011fi yakalar ve Valtio, ilgili bile\u015fenlerin yeniden render edilmesini tetikler. Bu yakla\u015f\u0131m, \u00f6zellikle derinlemesine i\u00e7 i\u00e7e ge\u00e7mi\u015f objeleri veya dizileri y\u00f6netirken b\u00fcy\u00fck kolayl\u0131k sa\u011flar, \u00e7\u00fcnk\u00fc manuel olarak de\u011fi\u015fmez kopyalar olu\u015fturma zahmetinden kurtar\u0131r.<\/p>\n

Valtio’nun bu esnek yap\u0131s\u0131, geli\u015ftiricilere h\u0131zl\u0131 prototipleme ve daha az “boilerplate” kodu yazma imkan\u0131 sunar. \u00d6rne\u011fin, bir al\u0131\u015fveri\u015f sepeti uygulamas\u0131nda \u00fcr\u00fcn miktar\u0131n\u0131 art\u0131rmak i\u00e7in:<\/p>\n

\nimport { proxy } from 'valtio';\n\n\/\/ Global al\u0131\u015fveri\u015f sepeti durumu\nconst cartStore = proxy({\n  items: [\n    { id: 1, name: 'Laptop', price: 1200, quantity: 1 },\n    { id: 2, name: 'Mouse', price: 25, quantity: 2 },\n  ],\n  total: 1250,\n});\n\n\/\/ Sepete \u00fcr\u00fcn ekleme veya miktar g\u00fcncelleme\nconst addItemToCart = (item, quantity = 1) => {\n  const existingItem = cartStore.items.find(i => i.id === item.id);\n  if (existingItem) {\n    existingItem.quantity += quantity; \/\/ Do\u011frudan mutate!\n  } else {\n    cartStore.items.push({ ...item, quantity }); \/\/ Do\u011frudan mutate!\n  }\n  updateCartTotal();\n};\n\nconst updateCartTotal = () => {\n  cartStore.total = cartStore.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);\n};\n\n\/\/ Bir React bile\u015feninde kullan\u0131m\u0131 (yorum sat\u0131rlar\u0131 d\u0131\u015f\u0131ndaki kod)\n\/\/ import { useSnapshot } from 'valtio';\n\/\/ const CartDisplay = () => {\n\/\/   const snap = useSnapshot(cartStore);\n\/\/   return (\n\/\/     
\n\/\/       {snap.items.map(item => (\n\/\/         
{item.name} - {item.quantity} adet<\/div>\n\/\/       ))}\n\/\/       
Toplam: {snap.total} TL<\/p>\n\/\/     <\/div>\n\/\/   );\n\/\/ };\n<\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, cartStore.items<\/code> veya existingItem.quantity<\/code> gibi de\u011ferleri do\u011frudan de\u011fi\u015ftirebiliyoruz. Bu, Valtio'nun Proxy mekanizmas\u0131 sayesinde m\u00fcmk\u00fcn olur ve React bile\u015fenleri bu de\u011fi\u015fiklikleri otomatik olarak alg\u0131lar. Bu basitlik ve do\u011frudanl\u0131k, Valtio'yu \u00f6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projelerde veya belirli state par\u00e7ac\u0131klar\u0131n\u0131 y\u00f6netmek i\u00e7in cazip bir se\u00e7enek haline getirir. Ancak, bu g\u00fcc\u00fcn beraberinde getirdi\u011fi baz\u0131 potansiyel tuzaklar da vard\u0131r ki \"Missing Proxy\" sorunu bunlardan biridir.<\/p>\n
\u00c7oklu Valtio Instance'lar\u0131 Neden Bir Sorun Haline Gelir?<\/h2>\n
Valtio'nun temel \u00e7al\u0131\u015fma prensibi, bir proxy<\/code> fonksiyonu ile sar\u0131lm\u0131\u015f objeler \u00fczerinde yap\u0131lan de\u011fi\u015fiklikleri izlemesidir. Normalde, uygulaman\u0131zda global bir state'i y\u00f6netmek i\u00e7in tek bir Valtio proxy objesi (veya birka\u00e7 ba\u011f\u0131ms\u0131z proxy objesi) olu\u015fturursunuz. Ancak, uygulaman\u0131z\u0131n boyutu ve karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, veya farkl\u0131 mod\u00fcller ya da k\u00fct\u00fcphaneler kulland\u0131\u011f\u0131n\u0131zda, istemeden birden fazla ayn\u0131 Valtio proxy instance'\u0131 olu\u015fturma riski ortaya \u00e7\u0131kar. Bu durum, \u00f6zellikle JavaScript'in mod\u00fcl \u00e7\u00f6z\u00fcn\u00fcrl\u00fck mekanizmalar\u0131 ve ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimiyle ilgili n\u00fcanslar nedeniyle ba\u015f g\u00f6sterir ve genellikle uygulaman\u0131z\u0131n beklenmedik \u015fekillerde bozulmas\u0131na neden olur.<\/p>\n
\u00c7oklu Valtio instance'lar\u0131, genellikle \u015fu senaryolarda ortaya \u00e7\u0131kar:<\/p>\n
    \n
  1. Paket Y\u00f6neticisi Uyu\u015fmazl\u0131klar\u0131 (npm\/yarn deduplication sorunlar\u0131):<\/strong> Monorepo'larda veya karma\u015f\u0131k ba\u011f\u0131ml\u0131l\u0131k a\u011fa\u00e7lar\u0131na sahip projelerde, farkl\u0131 paketler ayn\u0131 Valtio s\u00fcr\u00fcm\u00fcn\u00fc ba\u011f\u0131ml\u0131l\u0131k olarak i\u00e7erebilir. Paket y\u00f6neticileri (npm, yarn, pnpm) genellikle ba\u011f\u0131ml\u0131l\u0131klar\u0131 tekille\u015ftirmeye (deduplication) \u00e7al\u0131\u015fsa da, bazen bu i\u015flem d\u00fczg\u00fcn \u00e7al\u0131\u015fmayabilir ve ayn\u0131 k\u00fct\u00fcphanenin farkl\u0131 fiziksel kopyalar\u0131 (farkl\u0131 dosya yollar\u0131nda) uygulaman\u0131n bundle'\u0131na dahil olabilir. Bu durumda, her kopyadan \u00e7a\u011fr\u0131lan proxy()<\/code> fonksiyonu, kendi i\u00e7 ba\u011flam\u0131na (context) sahip ayr\u0131 bir Valtio \"instance'\u0131\" olu\u015fturur.<\/li>\n
  2. Mod\u00fcler Uygulamalar ve Mikrofrontend Mimarileri:<\/strong> Bir uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmleri (\u00f6rne\u011fin, bir mikrofrontend) veya ba\u011f\u0131ms\u0131z mod\u00fcller kendi Valtio store'lar\u0131n\u0131 olu\u015fturabilir. E\u011fer bu mod\u00fcllerin veya mikrofrontend'lerin ortak bir state'i payla\u015fmas\u0131 gerekiyorsa ve her biri kendi ba\u011f\u0131ms\u0131z Valtio instance'\u0131n\u0131 yarat\u0131rsa, bu durum \"Missing Proxy\" sorununa yol a\u00e7ar. Her instance, kendi i\u00e7 takip mekanizmas\u0131na sahip olur ve bir instance'\u0131n olu\u015fturdu\u011fu proxy, di\u011fer instance taraf\u0131ndan tan\u0131nmaz.<\/li>\n
  3. Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu Hatalar\u0131 veya Yanl\u0131\u015f Yap\u0131land\u0131rma:<\/strong> \u00d6zellikle ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu framework'leri (\u00f6rne\u011fin InversifyJS, NestJS custom providers) kullan\u0131rken, Valtio store'unuzu singleton olarak sa\u011flamak yerine her enjeksiyonda yeni bir instance olu\u015fturacak \u015fekilde yap\u0131land\u0131r\u0131rsan\u0131z, bu sorun ortaya \u00e7\u0131kar. Ya da basit\u00e7e, global olarak eri\u015filebilir olmas\u0131 gereken bir store'u yanl\u0131\u015fl\u0131kla bir bile\u015fen i\u00e7inde her render'da yeniden tan\u0131mlarsan\u0131z.<\/li>\n
  4. Farkl\u0131 Versiyonlar\u0131n Kullan\u0131m\u0131:<\/strong> Nadiren de olsa, uygulaman\u0131zda Valtio'nun farkl\u0131 ana s\u00fcr\u00fcmleri ayn\u0131 anda bulunabilir. Bu durum, temel dahili mekanizmalar\u0131n uyu\u015fmazl\u0131\u011f\u0131na yol a\u00e7arak proxy'lerin birbirini tan\u0131mas\u0131n\u0131 engelleyebilir.<\/li>\n<\/ol>\n
    Bu senaryolar\u0131n ortak noktas\u0131, Valtio'nun dahili olarak kulland\u0131\u011f\u0131 \"proxy registry\" mekanizmas\u0131n\u0131n birden fazla kopyas\u0131n\u0131n olu\u015fmas\u0131d\u0131r. Valtio, bir objenin zaten bir proxy olup olmad\u0131\u011f\u0131n\u0131 veya bir proxy'nin hangi objeyi sard\u0131\u011f\u0131n\u0131 anlamak i\u00e7in dahili bir e\u015fleme (mapping) kullan\u0131r. E\u011fer bu e\u015fleme farkl\u0131 Valtio instance'lar\u0131 aras\u0131nda payla\u015f\u0131lm\u0131yorsa, bir instance taraf\u0131ndan olu\u015fturulan proxy, di\u011fer instance taraf\u0131ndan \"tan\u0131nmayan bir obje\" olarak g\u00f6r\u00fcl\u00fcr. Bu da, useSnapshot<\/code> hook'unun beklenen g\u00fcncellemeleri alamamas\u0131na, state'in senkronize olmamas\u0131na veya daha k\u00f6t\u00fcs\u00fc, uygulaman\u0131n tamamen donmas\u0131na neden olabilir.<\/p>\n
    \n
    Vaka Analizi: E-ticaret Sepeti Senkronizasyon Sorunu<\/h3>\n
    Bir e-ticaret uygulamas\u0131n\u0131n geli\u015ftirilmesi s\u0131ras\u0131nda, bir ekip \"\u00dcr\u00fcn Detay Sayfas\u0131\"n\u0131, di\u011fer bir ekip ise \"Sepet Mod\u00fcl\u00fc\"n\u00fc geli\u015ftiriyordu. Her iki ekip de state y\u00f6netimi i\u00e7in Valtio kullanmaya karar verdi. \"\u00dcr\u00fcn Detay Sayfas\u0131\" ekibi, \u00fcr\u00fcn\u00fc sepete eklemek i\u00e7in kendi cartStore.js<\/code> dosyas\u0131n\u0131 olu\u015fturup i\u00e7inde proxy({ items: [] })<\/code> \u00e7a\u011fr\u0131s\u0131 yapt\u0131. Benzer \u015fekilde, \"Sepet Mod\u00fcl\u00fc\" ekibi de kendi cartStore.js<\/code> dosyas\u0131n\u0131 olu\u015fturup ayn\u0131 \u00e7a\u011fr\u0131y\u0131 kulland\u0131. Sorun \u015fu ki, bu iki cartStore.js<\/code> dosyas\u0131, uygulaman\u0131n ana bundle'\u0131na dahil edildi\u011finde iki ayr\u0131 Valtio instance'\u0131 olarak derlendi. Sonu\u00e7: \u00dcr\u00fcn Detay Sayfas\u0131'ndan sepete eklenen \u00fcr\u00fcnler, Sepet Mod\u00fcl\u00fc'nde g\u00f6r\u00fcnm\u00fcyordu ve tam tersi. Her mod\u00fcl kendi ba\u011f\u0131ms\u0131z sepet durumunu y\u00f6netiyordu, \u00e7\u00fcnk\u00fc Valtio'nun proxy mekanizmas\u0131, farkl\u0131 mod\u00fcl ba\u011flamlar\u0131nda olu\u015fturulan proxy'leri birbirini tan\u0131yamad\u0131. Geli\u015ftiriciler, defalarca debug yaparak state'in g\u00fcncellendi\u011fini g\u00f6r\u00fcyor ancak UI'\u0131n reaksiyon vermedi\u011fini fark ediyordu.<\/p>\n<\/div>\n
    Bu t\u00fcr senaryolarda, uygulaman\u0131z\u0131n davran\u0131\u015f\u0131n\u0131 anlamak zorla\u015f\u0131r. Bir par\u00e7as\u0131 state'i g\u00fcncelledi\u011fini d\u00fc\u015f\u00fcn\u00fcrken, di\u011fer par\u00e7as\u0131 g\u00fcncellenmemi\u015f eski bir state'i g\u00f6stermeye devam eder. Bu durum, \u00f6zellikle b\u00fcy\u00fck ve mod\u00fcler uygulamalarda ciddi bir hata ay\u0131klama kabusuna d\u00f6n\u00fc\u015febilir. Dolay\u0131s\u0131yla, Valtio kullan\u0131rken tek bir global instance'a sahip olman\u0131n veya en az\u0131ndan instance'lar\u0131n payla\u015f\u0131m\u0131n\u0131 net bir \u015fekilde y\u00f6netmenin \u00f6nemi b\u00fcy\u00fckt\u00fcr.<\/p>\n
    Missing Proxy Sendromu: Referans Kayb\u0131 Ne Anlama Geliyor?<\/h3>\n
    Yukar\u0131da bahsedilen \u00e7oklu Valtio instance'lar\u0131 sorununun kalbinde \"Missing Proxy\" sendromu yatar. Bu sendrom, basit\u00e7e, Valtio'nun bir objenin bir proxy ile sarmaland\u0131\u011f\u0131n\u0131 bekledi\u011fi halde, kendisine saf bir JavaScript objesi sunulmas\u0131yla ortaya \u00e7\u0131kan bir referans uyu\u015fmazl\u0131\u011f\u0131 durumudur. Valtio, dahili olarak bir \"weak map\" veya benzeri bir mekanizma kullanarak, orijinal objeleri olu\u015fturdu\u011fu proxy'lerle e\u015fle\u015ftirir. Bu e\u015fleme sayesinde, useSnapshot<\/code> gibi hook'lar, kendilerine verilen objenin asl\u0131nda bir Valtio proxy'si oldu\u011funu anlayabilir ve bu proxy \u00fczerinde yap\u0131lan de\u011fi\u015fiklikleri izleyebilir.<\/p>\n
    JavaScript Proxy objesi, asl\u0131nda bir objenin davran\u0131\u015f\u0131n\u0131 \"intercept\" etmek (yakalamak) i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bir objeyi Proxy ile sarmalad\u0131\u011f\u0131n\u0131zda, bu Proxy objesi orijinal objeye do\u011frudan eri\u015fim sa\u011flar ancak t\u00fcm etkile\u015fimleri kendi \u00fczerinden ge\u00e7irir. Valtio, bu sayede state objesi \u00fczerindeki her t\u00fcrl\u00fc okuma (get) ve yazma (set) i\u015flemini yakalayarak, hangi par\u00e7alar\u0131n de\u011fi\u015fti\u011fini ve hangi bile\u015fenlerin bu de\u011fi\u015fikliklerden etkilenmesi gerekti\u011fini belirler. Bu reaktivite, uygulaman\u0131z\u0131n h\u0131zl\u0131 ve verimli bir \u015fekilde g\u00fcncellenmesini sa\u011flar.<\/p>\n
    Ancak, e\u011fer uygulaman\u0131zda farkl\u0131 Valtio instance'lar\u0131 varsa, her instance'\u0131n kendine ait bir \"proxy registry\"si olacakt\u0131r. Bir instance taraf\u0131ndan olu\u015fturulan proxy, di\u011fer instance'\u0131n registry'sinde yer almad\u0131\u011f\u0131 i\u00e7in, ikinci instance taraf\u0131ndan verildi\u011finde bu obje \"sarmalanmam\u0131\u015f\" veya \"proxy olmayan\" bir obje olarak alg\u0131lan\u0131r. \u00d6rne\u011fin, mod\u00fcl A, kendi Valtio instance'\u0131 ile bir stateA = proxy({ count: 0 })<\/code> olu\u015fturdu. Mod\u00fcl B ise kendi Valtio instance'\u0131na sahip ve useSnapshot(stateA)<\/code> \u00e7a\u011f\u0131rd\u0131. Mod\u00fcl B'nin Valtio instance'\u0131, stateA<\/code>'n\u0131n kendisi taraf\u0131ndan sarmalanmad\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fc\u011f\u00fc i\u00e7in, onu sadece s\u0131radan bir JavaScript objesi olarak kabul eder ve \u00fczerinde yap\u0131lan de\u011fi\u015fiklikleri izleyemez. Bu durum, Mod\u00fcl A'da stateA.count++<\/code> yap\u0131ld\u0131\u011f\u0131nda Mod\u00fcl B'deki UI'\u0131n g\u00fcncellenmemesiyle sonu\u00e7lan\u0131r.<\/p>\n
    Bu referans kayb\u0131, Valtio'nun reaktivite yeteneklerinin tamamen ortadan kalkt\u0131\u011f\u0131 anlam\u0131na gelir. useSnapshot<\/code> hook'u, verilen objenin bir proxy olmad\u0131\u011f\u0131n\u0131 fark etti\u011finde, ya sessizce \u00e7al\u0131\u015fmaz (g\u00fcncelmeleri ka\u00e7\u0131r\u0131r) ya da geli\u015ftirme modunda uyar\u0131lar f\u0131rlatabilir. Geli\u015ftirme s\u00fcrecinde bu uyar\u0131lar genellikle g\u00f6zden ka\u00e7ar veya \u00f6nemsenmez, ta ki kullan\u0131c\u0131lar beklenmedik davran\u0131\u015flar bildirene kadar. \u00dcretim ortam\u0131nda ise bu durum, state'in tutars\u0131z olmas\u0131na, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn donmas\u0131na veya kritik i\u015flevlerin \u00e7al\u0131\u015fmamas\u0131na yol a\u00e7abilir.<\/p>\n
    A\u015fa\u011f\u0131daki kod par\u00e7as\u0131, Missing Proxy sendromunun bir sim\u00fclasyonunu g\u00f6stermektedir. \u0130ki ayr\u0131 \"proxy sistemi\" olu\u015fturmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131zda neler olaca\u011f\u0131n\u0131 g\u00f6zlemleyebiliriz:<\/p>\n
    \n\/\/ Sim\u00fclasyon i\u00e7in Valtio'nun i\u00e7 mekanizmas\u0131na benzer bir yap\u0131 kurgulayal\u0131m.\n\/\/ Normalde Valtio bunu dahili olarak y\u00f6netir.\nconst createValtioSystem = () => {\n  const proxyMap = new WeakMap(); \/\/ Orijinal objeleri proxy'lerle e\u015fler\n  const listeners = new Map();   \/\/ Proxy'lere ba\u011fl\u0131 dinleyicileri tutar\n\n  const customProxy = (initialState) => {\n    if (proxyMap.has(initialState)) {\n      return proxyMap.get(initialState); \/\/ Zaten sar\u0131l\u0131ysa ayn\u0131 proxy'yi d\u00f6nd\u00fcr\n    }\n\n    const handler = {\n      set(target, prop, value, receiver) {\n        const oldVal = Reflect.get(target, prop, receiver);\n        const result = Reflect.set(target, prop, value, receiver);\n        if (oldVal !== value) {\n          \/\/ De\u011fi\u015fiklik oldu, dinleyicileri bilgilendir\n          listeners.forEach(callback => callback(target));\n        }\n        return result;\n      }\n    };\n    const p = new Proxy(initialState, handler);\n    proxyMap.set(initialState, p);\n    return p;\n  };\n\n  const subscribe = (p, callback) => {\n    listeners.set(callback, callback); \/\/ Basit bir dinleyici ekleme\n  };\n\n  return { customProxy, subscribe };\n};\n\n\/\/ --- Uygulaman\u0131n farkl\u0131 yerlerinde iki ayr\u0131 Valtio sistemi olu\u015ftu\u011funu varsayal\u0131m ---\n\n\/\/ Sistem A\nconst valtioSystemA = createValtioSystem();\nconst storeA = valtioSystemA.customProxy({ count: 0, message: 'Hello from A' });\n\n\/\/ Sistem B\nconst valtioSystemB = createValtioSystem();\nconst storeB = valtioSystemB.customProxy({ count: 0, message: 'Hello from B' });\n\n\/\/ Sistem A taraf\u0131ndan olu\u015fturulan proxy'yi Sistem B dinlemeye \u00e7al\u0131\u015f\u0131yor\n\/\/ Normalde useSnapshot bunu yapar\nvaltioSystemB.subscribe(storeA, (updatedState) => {\n  console.log(\"Sistem B, Sistem A'daki de\u011fi\u015fikli\u011fi alg\u0131lad\u0131:\", updatedState);\n});\n\n\/\/ Sistem A'da bir de\u011fi\u015fiklik yapal\u0131m\nstoreA.count++;\nconsole.log(\"Sistem A'daki count g\u00fcncellendi:\", storeA.count);\n\n\/\/ Beklenti: Sistem B'deki callback'in \u00e7al\u0131\u015fmas\u0131.\n\/\/ Ger\u00e7ekle\u015fen: Bu sim\u00fclasyonda \u00e7al\u0131\u015fmaz, \u00e7\u00fcnk\u00fc storeA, valtioSystemB'nin kendi proxyMap'inde kay\u0131tl\u0131 de\u011fil.\n\/\/ Valtio'nun ger\u00e7ek implementasyonunda, useSnapshot(storeA) \u00e7a\u011fr\u0131s\u0131 storeA'n\u0131n kendi Valtio instance'\u0131 taraf\u0131ndan sar\u0131lmad\u0131\u011f\u0131n\u0131 fark eder\n\/\/ ve do\u011fru reaksiyonu vermez.\n\n\/\/ Kendi sisteminde de\u011fi\u015fiklik yaparsa \u00e7al\u0131\u015f\u0131r:\nvaltioSystemA.subscribe(storeA, (updatedState) => {\n    console.log(\"Sistem A kendi de\u011fi\u015fikli\u011fini alg\u0131lad\u0131 (beklenen):\", updatedState);\n});\nstoreA.message = \"Updated from A!\"; \/\/ Bu de\u011fi\u015fiklik Sistem A'n\u0131n kendi dinleyicisi taraf\u0131ndan alg\u0131lan\u0131r.\n<\/pre>\n
    <\/code><\/p>\n
    Yukar\u0131daki \u00f6rnekte, valtioSystemB.subscribe(storeA, ...)<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131n, storeA<\/code>'daki de\u011fi\u015fiklikleri alg\u0131lamamas\u0131 beklenir (ve sim\u00fclasyonda da b\u00f6yle olur). \u00c7\u00fcnk\u00fc storeA<\/code>, valtioSystemA<\/code>'n\u0131n i\u00e7 ba\u011flam\u0131nda bir proxy olarak olu\u015fturulmu\u015ftur. valtioSystemB<\/code>'nin kendi i\u00e7 proxyMap<\/code>'i ve listeners<\/code>'\u0131 farkl\u0131d\u0131r. Bu durum, \"Missing Proxy\" sendromunun \u00f6z\u00fcn\u00fc olu\u015fturur: Farkl\u0131 Valtio \"evrenleri\" birbirini tan\u0131maz ve bu da reaktivite zincirinin k\u0131r\u0131lmas\u0131na yol a\u00e7ar. Bu sorunu \u00e7\u00f6zmenin yolu, uygulaman\u0131zda tek bir Valtio instance'\u0131n\u0131n oldu\u011fundan emin olmakt\u0131r.<\/p>\n
    Uygulaman\u0131z\u0131 Bozan Senaryolar: Ger\u00e7ek Hayattan \u00d6rnekler<\/h2>\n
    Valtio'daki \"Missing Proxy\" sorunu, sadece teorik bir olas\u0131l\u0131k de\u011fil, ayn\u0131 zamanda b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan, ba\u015f a\u011fr\u0131t\u0131c\u0131 bir problem olabilir. Geli\u015ftiriciler genellikle bu sorunu fark etmeden uzun s\u00fcre hata ay\u0131klama d\u00f6ng\u00fclerine girebilirler \u00e7\u00fcnk\u00fc kod do\u011fru gibi g\u00f6r\u00fcnse de, beklenen reaktivite ger\u00e7ekle\u015fmez. \u0130\u015fte bu sorunun ortaya \u00e7\u0131kabilece\u011fi baz\u0131 ger\u00e7ek d\u00fcnya senaryolar\u0131:<\/p>\n
      \n
    1. \n        Monorepo Yap\u0131lar\u0131 ve Farkl\u0131 Paket S\u00fcr\u00fcmleri:<\/strong><\/p>\n
      Monorepo'lar (tek bir depoda birden fazla projenin tutuldu\u011fu yap\u0131lar), genellikle payla\u015f\u0131lan k\u00fct\u00fcphanelerle birlikte gelir. Diyelim ki, bir monorepo'da @my-org\/shared-state<\/code> ad\u0131nda bir paketiniz var ve bu paket Valtio kullanarak global bir uygulama durumunu y\u00f6netiyor. E\u011fer hem app-admin<\/code> projesi hem de app-client<\/code> projesi bu @my-org\/shared-state<\/code> paketine ba\u011f\u0131ml\u0131ysa, ve bir \u015fekilde paket y\u00f6neticisi (npm, yarn, pnpm) valtio<\/code> paketini farkl\u0131 s\u00fcr\u00fcmlerle veya farkl\u0131 fiziksel konumlarda \u00e7\u00f6z\u00fcml\u00fcyorsa, her proje kendi i\u00e7inde ayr\u0131 bir Valtio \"instance'\u0131\" ile \u00e7al\u0131\u015fabilir. Bu durumda, app-admin<\/code>'deki bir de\u011fi\u015fiklik, app-client<\/code>'deki ayn\u0131 state'i dinleyen bile\u015fenleri etkilemez \u00e7\u00fcnk\u00fc iki ayr\u0131 Valtio runtime'\u0131 bulunmaktad\u0131r.<\/p>\n
      \u00d6rnek Problem:<\/strong> Bir kullan\u0131c\u0131n\u0131n oturum a\u00e7ma bilgisini tutan authStore<\/code>'un @my-org\/shared-state<\/code> i\u00e7inde tan\u0131mland\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn. app-admin<\/code>'de bir y\u00f6netici oturum a\u00e7t\u0131\u011f\u0131nda, authStore.user<\/code> g\u00fcncellenir. Ancak app-client<\/code>'deki navigasyon \u00e7ubu\u011fu, hala kullan\u0131c\u0131n\u0131n oturum a\u00e7mad\u0131\u011f\u0131n\u0131 g\u00f6sterir \u00e7\u00fcnk\u00fc kendi ba\u011flam\u0131ndaki authStore<\/code> instance'\u0131 g\u00fcncellenmemi\u015ftir.<\/p>\n<\/li>\n
    2. \n        NPM Link veya Yerel Ba\u011f\u0131ml\u0131l\u0131klar:<\/strong><\/p>\n
      Geli\u015ftirme s\u0131ras\u0131nda, bir k\u00fct\u00fcphaneyi veya mod\u00fcl\u00fc projenize npm link<\/code> ile ba\u011flamak veya do\u011frudan yerel bir klas\u00f6rden ba\u011f\u0131ml\u0131l\u0131k olarak eklemek olduk\u00e7a yayg\u0131nd\u0131r. Ancak bu, bazen paket y\u00f6neticisinin ba\u011f\u0131ml\u0131l\u0131k a\u011fac\u0131n\u0131 d\u00fczg\u00fcn bir \u015fekilde tekille\u015ftirmesini engelleyebilir. E\u011fer ba\u011fl\u0131 k\u00fct\u00fcphane kendi i\u00e7inde Valtio'ya ba\u011f\u0131ml\u0131ysa ve ana uygulaman\u0131z da Valtio'ya ba\u011f\u0131ml\u0131ysa, bu iki ba\u011f\u0131ml\u0131l\u0131k ayn\u0131 k\u00fct\u00fcphanenin iki ayr\u0131 kopyas\u0131 olarak alg\u0131lanabilir. Sonu\u00e7 olarak, ana uygulaman\u0131zdaki proxy()<\/code> \u00e7a\u011fr\u0131s\u0131 ile k\u00fct\u00fcphanenizdeki proxy()<\/code> \u00e7a\u011fr\u0131s\u0131 farkl\u0131 Valtio runtime'lar\u0131na i\u015faret eder.<\/p>\n
      \n        \/\/ Ana Uygulama package.json\n        {\n          \"dependencies\": {\n            \"valtio\": \"^1.0.0\",\n            \"my-local-library\": \"file:..\/my-local-library\"\n          }\n        }\n\n        \/\/ my-local-library\/package.json\n        {\n          \"dependencies\": {\n            \"valtio\": \"^1.0.0\" \/\/ Ana uygulamadan farkl\u0131 bir Valtio instance'\u0131 olabilir\n          }\n        }\n        <\/pre>\n
      <\/code><\/p>\n
      Bu senaryo, genellikle \"Mod\u00fcller aras\u0131nda state senkronize olmuyor\" veya \"Bir bile\u015fende state g\u00fcncelleniyor ama ba\u015fka bir bile\u015fen bunu g\u00f6rm\u00fcyor\" \u015fikayetlerine yol a\u00e7ar.<\/p>\n<\/li>\n
    3. \n        Yanl\u0131\u015fl\u0131kla Birden Fazla Store Olu\u015fturma:<\/strong><\/p>\n
      Bazen geli\u015ftiriciler, bir Valtio store'unu global olarak bir mod\u00fclde tan\u0131mlamak yerine, bir React bile\u015feni i\u00e7inde veya bir hook i\u00e7inde yanl\u0131\u015fl\u0131kla tan\u0131mlayabilirler. E\u011fer bu tan\u0131mlama, bile\u015fenin her render'\u0131nda veya hook'un her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda yeniden ger\u00e7ekle\u015fiyorsa, asl\u0131nda s\u00fcrekli yeni ve ba\u011f\u0131ms\u0131z Valtio proxy instance'lar\u0131 olu\u015fturuluyor demektir. Bu instance'lar birbirini tan\u0131maz ve state g\u00fcncellemeleri beklenen \u015fekilde yay\u0131lmaz.<\/p>\n
      \n        \/\/ Hatal\u0131 Yakla\u015f\u0131m: Her render'da yeni store\n        \/\/ MyComponent.js\n        import { proxy, useSnapshot } from 'valtio';\n\n        function MyComponent() {\n          \/\/ Bu store her render'da yeniden olu\u015fturulur ve \u00f6ncekiyle ba\u011flant\u0131s\u0131 kopar!\n          const localStore = proxy({ value: 0 }); \n          const snap = useSnapshot(localStore);\n\n          const increment = () => {\n            localStore.value++; \/\/ Sadece bu bile\u015fenin kendi i\u00e7inde etki eder\n          };\n\n          return (\n            
      \n              
      De\u011fer: {snap.value}<\/p>\n