{"id":31894,"date":"2025-10-15T08:41:17","date_gmt":"2025-10-15T05:41:17","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31894"},"modified":"2025-10-15T08:41:17","modified_gmt":"2025-10-15T05:41:17","slug":"react-bilesenleri-arasinda-durum-paylasimi-context-api-derinlemesine","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-bilesenleri-arasinda-durum-paylasimi-context-api-derinlemesine\/","title":{"rendered":"React Bile\u015fenleri Aras\u0131nda Durum Payla\u015f\u0131m\u0131: Context API Derinlemesine"},"content":{"rendered":"

<\/p>\n

React Bile\u015fenleri Aras\u0131nda Durum Payla\u015f\u0131m\u0131: Context API Derinlemesine<\/h2>\n

Modern web uygulamalar\u0131 geli\u015ftirirken, React gibi bile\u015fen tabanl\u0131 k\u00fct\u00fcphaneler, kullan\u0131c\u0131 aray\u00fczlerini y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir yap\u0131 sunar. Ancak, uygulaman\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, farkl\u0131 bile\u015fenler aras\u0131nda durum (state) payla\u015f\u0131m\u0131 \u00f6nemli bir zorluk haline gelebilir. \u00d6zellikle, bir durumun bile\u015fen a\u011fac\u0131nda derinlerdeki bir bile\u015fen taraf\u0131ndan kullan\u0131lmas\u0131 gerekti\u011finde, bu durumu \u00fcst bile\u015fenlerden alt bile\u015fenlere prop’lar arac\u0131l\u0131\u011f\u0131yla manuel olarak aktarmak (“prop drilling”) hem kodun okunabilirli\u011fini azalt\u0131r hem de bak\u0131m\u0131 zorla\u015ft\u0131r\u0131r. React Context API, bu t\u00fcr durum payla\u015f\u0131m sorunlar\u0131na zarif ve yerle\u015fik bir \u00e7\u00f6z\u00fcm sunarak, bile\u015fenler aras\u0131nda veri ak\u0131\u015f\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n

Bu makalede, React Context API’nin ne oldu\u011funu, prop drilling sorununu nas\u0131l \u00e7\u00f6zd\u00fc\u011f\u00fcn\u00fc, temel bile\u015fenlerini ve ad\u0131m ad\u0131m nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, dinamik durum y\u00f6netimi, performans optimizasyonlar\u0131 ve Context API’nin ne zaman di\u011fer durum y\u00f6netim k\u00fct\u00fcphanelerine (Redux, Zustand vb.) tercih edilmesi gerekti\u011fi gibi konulara da de\u011finece\u011fiz. Amac\u0131m\u0131z, geli\u015ftiricilere Context API’yi projelerinde etkili bir \u015fekilde kullanmalar\u0131 i\u00e7in kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n

Prop Drilling Nedir ve Neden Bir Sorundur?<\/h2>\n

React uygulamalar\u0131nda, veriler genellikle \u00fcst bile\u015fenlerden alt bile\u015fenlere “prop” ad\u0131 verilen \u00f6zellikler arac\u0131l\u0131\u011f\u0131yla aktar\u0131l\u0131r. Bu, bile\u015fenler aras\u0131ndaki veri ak\u0131\u015f\u0131n\u0131 a\u00e7\u0131k ve anla\u015f\u0131l\u0131r k\u0131lar. Ancak, bir veri par\u00e7as\u0131n\u0131n bile\u015fen a\u011fac\u0131nda \u00e7ok derinlerdeki bir bile\u015fen taraf\u0131ndan kullan\u0131lmas\u0131 gerekti\u011finde, bu veri, arada kalan ve asl\u0131nda bu veriye ihtiyac\u0131 olmayan bile\u015fenler \u00fczerinden de prop olarak ge\u00e7irilmek zorunda kal\u0131r. Bu duruma “prop drilling” (prop sondaj\u0131) denir.<\/p>\n

Prop Drilling’in Tan\u0131m\u0131<\/h3>\n

Prop drilling, bir verinin (state veya fonksiyon) bile\u015fen hiyerar\u015fisinde birden fazla katman atlayarak, do\u011frudan kullan\u0131c\u0131s\u0131 olmayan ara bile\u015fenler \u00fczerinden ge\u00e7irilmesi i\u015flemidir. \u00d6rne\u011fin, AppComponent<\/code>‘in sahip oldu\u011fu bir user<\/code> objesini, AppComponent<\/code> -> Dashboard<\/code> -> Sidebar<\/code> -> UserProfile<\/code> yolunu izleyerek UserProfile<\/code> bile\u015fenine ula\u015ft\u0131rmak istedi\u011finizi varsayal\u0131m. Dashboard<\/code> ve Sidebar<\/code> bile\u015fenlerinin user<\/code> objesine do\u011frudan ihtiyac\u0131 olmamas\u0131na ra\u011fmen, bu objeyi UserProfile<\/code>‘a iletmek i\u00e7in prop olarak almak ve alt bile\u015fenlerine aktarmak zorundad\u0131rlar.<\/p>\n

\/\/ AppComponent.js\nfunction AppComponent() {\n  const user = { name: \"Alice\", id: 1 };\n  return ;\n}\n\n\/\/ Dashboard.js\nfunction Dashboard({ user }) {\n  return ;\n}\n\n\/\/ Sidebar.js\nfunction Sidebar({ user }) {\n  return (\n    
\n      
Welcome, {user.name}<\/p>\n      \n    <\/div>\n  );\n}\n\n\/\/ UserProfile.js\nfunction UserProfile({ user }) {\n  return 
User ID: {user.id}<\/div>;\n}<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, user<\/code> prop’u Dashboard<\/code> ve Sidebar<\/code> \u00fczerinden “delinerek” UserProfile<\/code>‘a ula\u015ft\u0131r\u0131lm\u0131\u015ft\u0131r.<\/p>\n
Prop Drilling’in Dezavantajlar\u0131<\/h3>\n
Prop drilling, uygulaman\u0131n boyutu ve karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a bir dizi soruna yol a\u00e7ar:<\/p>\n
*   Kod Okunabilirli\u011finin Azalmas\u0131:<\/strong> Hangi prop’un nereden geldi\u011fini ve hangi bile\u015fenin ona ger\u00e7ekten ihtiya\u00e7 duydu\u011funu anlamak zorla\u015f\u0131r. Bir prop’un sadece aktar\u0131c\u0131 g\u00f6revi g\u00f6ren bile\u015fenlerde bulunmas\u0131, kodun amac\u0131n\u0131 belirsizle\u015ftirir.
\n*   Bak\u0131m Zorlu\u011fu:<\/strong> Bir prop’un ad\u0131n\u0131 veya yap\u0131s\u0131n\u0131 de\u011fi\u015ftirmek istedi\u011finizde, bu prop’u kullanan t\u00fcm bile\u015fenlerin yan\u0131 s\u0131ra, bu prop’u sadece ileten t\u00fcm ara bile\u015fenleri de g\u00fcncellemeniz gerekir. Bu, hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r ve refactoring s\u00fcrecini yava\u015flat\u0131r.
\n*   Bile\u015fen Tekrar Kullan\u0131labilirli\u011finin D\u00fc\u015fmesi:<\/strong> Bir bile\u015fen, ihtiya\u00e7 duymad\u0131\u011f\u0131 prop’lara ba\u011f\u0131ml\u0131 hale geldi\u011finde, onu ba\u015fka bir ba\u011flamda tekrar kullanmak zorla\u015f\u0131r. \u00c7\u00fcnk\u00fc bu bile\u015fenin, o prop’u sa\u011flayacak bir \u00fcst bile\u015fenle birlikte kullan\u0131lmas\u0131 gerekir.
\n*   Gereksiz Yeniden Render’lar:<\/strong> Prop’lar de\u011fi\u015fti\u011finde, React varsay\u0131lan olarak ilgili t\u00fcm bile\u015fenleri yeniden render eder. E\u011fer bir bile\u015fen sadece prop’u iletmekle kal\u0131yor ve kendi i\u00e7inde kullanm\u0131yorsa, bu bile\u015fenin prop de\u011fi\u015fti\u011finde yeniden render olmas\u0131 \u00e7o\u011fu zaman gereksizdir. Bu durum, performans sorunlar\u0131na yol a\u00e7abilir, \u00f6zellikle bile\u015fen a\u011fac\u0131 \u00e7ok derinse.<\/p>\n
Bu dezavantajlar g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, prop drilling’in React geli\u015ftiricilerinin ka\u00e7\u0131nmak istedi\u011fi bir anti-pattern oldu\u011fu a\u00e7\u0131kt\u0131r. \u0130\u015fte tam da bu noktada React Context API devreye girerek, bu soruna zarif bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n
React Context API’ye Giri\u015f<\/h2>\n
React Context API, bile\u015fen a\u011fac\u0131nda verileri manuel olarak prop’lar arac\u0131l\u0131\u011f\u0131yla her seviyede ge\u00e7irmeden, do\u011frudan payla\u015fman\u0131n bir yoludur. Temel olarak, bir “ba\u011flam” olu\u015fturman\u0131za ve bu ba\u011flamdaki verileri, a\u011fa\u00e7taki herhangi bir bile\u015fenin eri\u015febilece\u011fi \u015fekilde sa\u011flaman\u0131za olanak tan\u0131r.<\/p>\n
Context Nedir?<\/h3>\n
Context, React’te belirli bir t\u00fcrdeki verileri (\u00f6rne\u011fin, tema ayarlar\u0131, kullan\u0131c\u0131 kimlik do\u011frulama durumu veya tercih edilen dil) bile\u015fen a\u011fac\u0131n\u0131n derinliklerine iletmek i\u00e7in tasarlanm\u0131\u015f bir mekanizmad\u0131r. Bu sayede, bu verilere ihtiya\u00e7 duymayan ara bile\u015fenlerin bu verileri prop olarak almas\u0131na gerek kalmaz. Context, uygulaman\u0131zda “global” olarak kabul edilebilecek verileri y\u00f6netmek i\u00e7in idealdir, ancak bu veriler t\u00fcm uygulama i\u00e7in ge\u00e7erli olmak zorunda de\u011fildir; sadece belirli bir alt a\u011fa\u00e7 i\u00e7in ge\u00e7erli olabilir.<\/p>\n
Context API, \u00f6zellikle \u015fu t\u00fcr durumlar i\u00e7in kullan\u0131\u015fl\u0131d\u0131r:
\n*   Tema Y\u00f6netimi:<\/strong> A\u00e7\u0131k\/koyu tema ayarlar\u0131n\u0131 t\u00fcm bile\u015fenlere iletmek.
\n*   Kullan\u0131c\u0131 Kimlik Do\u011frulama:<\/strong> Giri\u015f yapm\u0131\u015f kullan\u0131c\u0131n\u0131n bilgilerini veya oturum durumunu payla\u015fmak.
\n*   Dil Se\u00e7imi:<\/strong> Uygulaman\u0131n tercih edilen dilini bile\u015fenlere bildirmek.
\n*   Uygulama Ayarlar\u0131:<\/strong> Genel uygulama ayarlar\u0131n\u0131 da\u011f\u0131tmak.<\/p>\n
Context API’nin Temel Bile\u015fenleri<\/h3>\n
Context API, \u00fc\u00e7 ana kavram etraf\u0131nda d\u00f6ner: Context’in kendisi, veri sa\u011flay\u0131c\u0131 (Provider) ve veri t\u00fcketici (Consumer). Modern React’te useContext<\/code> hook’u, t\u00fcketici bile\u015feninin yerini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde alm\u0131\u015ft\u0131r.<\/p>\n
1.  React.createContext()<\/code>:<\/strong> Bu fonksiyon, bir Context objesi olu\u015fturur. Bu obje, bir Provider<\/code> ve bir Consumer<\/code> (veya useContext<\/code> hook’u) i\u00e7erir. createContext()<\/code>‘e iste\u011fe ba\u011fl\u0131 olarak bir defaultValue<\/code> arg\u00fcman\u0131 ge\u00e7irebilirsiniz. Bu varsay\u0131lan de\u011fer, bir bile\u015fenin en yak\u0131n Provider<\/code>‘\u0131 bulamad\u0131\u011f\u0131nda veya Provider<\/code>‘\u0131n value<\/code> prop’u undefined<\/code> oldu\u011funda kullan\u0131l\u0131r. Bu genellikle testler i\u00e7in veya bir hata durumunda bir geri d\u00f6n\u00fc\u015f de\u011feri olarak faydal\u0131d\u0131r.<\/p>\n
const ThemeContext = React.createContext('light'); \/\/ 'light' varsay\u0131lan de\u011fer<\/code><\/pre>\n
2.  Context.Provider<\/code>:<\/strong> Her Context objesi, bir Provider<\/code> React bile\u015feniyle birlikte gelir. Bu bile\u015fen, Context’e abone olan t\u00fcm alt bile\u015fenlerin eri\u015febilece\u011fi value<\/code> prop’unu kabul eder. Bir Provider<\/code>‘\u0131 bile\u015fen a\u011fac\u0131n\u0131z\u0131n \u00fcst k\u0131s\u0131mlar\u0131na yerle\u015ftirerek, bu Provider<\/code>‘\u0131n alt\u0131ndaki t\u00fcm bile\u015fenlerin (derinlik fark etmeksizin) bu Context de\u011ferine eri\u015fmesini sa\u011flayabilirsiniz. Bir Provider<\/code>‘\u0131n value<\/code> prop’u de\u011fi\u015fti\u011finde, bu Context’i t\u00fcketen t\u00fcm bile\u015fenler yeniden render edilir.<\/p>\n
function App() {\n      const [theme, setTheme] = React.useState('light');\n      return (\n        \n          {\/ Bu alt a\u011fa\u00e7taki t\u00fcm bile\u015fenler 'theme' de\u011ferine eri\u015febilir <\/em>\/}\n          \n        <\/ThemeContext.Provider>\n      );\n    }<\/code><\/pre>\n
3.  useContext<\/code> Hook:<\/strong> Fonksiyonel bile\u015fenlerde Context de\u011ferini t\u00fcketmenin modern ve \u00f6nerilen yoludur. useContext<\/code> hook’u, kendisine verilen Context objesinin (yani React.createContext()<\/code> taraf\u0131ndan d\u00f6nd\u00fcr\u00fclen obje) ge\u00e7erli de\u011ferini d\u00f6nd\u00fcr\u00fcr. En yak\u0131n \u00fcst Provider<\/code>‘\u0131n value<\/code> prop’u neyse, o de\u011feri d\u00f6nd\u00fcr\u00fcr. E\u011fer yukar\u0131da bir Provider<\/code> yoksa, createContext()<\/code>‘e verilen varsay\u0131lan de\u011feri d\u00f6nd\u00fcr\u00fcr.<\/p>\n
function ThemedButton() {\n      const theme = React.useContext(ThemeContext);\n      return