React, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 mimarisi sayesinde karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r. Ancak, bir React uygulamas\u0131n\u0131n b\u00fcy\u00fcmesiyle birlikte, bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131 \u00f6nemli bir zorluk haline gelebilir. \u00d6zellikle, uygulaman\u0131n derinliklerinde yer alan bir bile\u015fenin, a\u011fac\u0131n tepesindeki bir bile\u015fenden gelen verilere ihtiya\u00e7 duymas\u0131 durumunda ortaya \u00e7\u0131kan “prop drilling” problemi, geli\u015ftiricilerin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 yayg\u0131n bir sorundur. React Context API, bu sorunu \u00e7\u00f6zmek ve bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131n\u0131 daha zarif ve verimli bir hale getirmek amac\u0131yla tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc bir \u00f6zelliktir.<\/p>\n
Bu makalede, React Context API’\u0131n ne oldu\u011funu, neden ortaya \u00e7\u0131kt\u0131\u011f\u0131n\u0131, temel bile\u015fenlerini, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, geli\u015fmi\u015f kullan\u0131m senaryolar\u0131n\u0131, performans ipu\u00e7lar\u0131n\u0131 ve di\u011fer durum y\u00f6netim \u00e7\u00f6z\u00fcmleriyle kar\u015f\u0131la\u015ft\u0131rmas\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Amac\u0131m\u0131z, Context API’\u0131n derinlemesine anla\u015f\u0131lmas\u0131n\u0131 sa\u011flamak ve onu React uygulamalar\u0131n\u0131zda etkili bir \u015fekilde kullanabilmeniz i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n
React’te veri ak\u0131\u015f\u0131 genellikle tek y\u00f6nl\u00fcd\u00fcr: \u00fcst bile\u015fenlerden alt bile\u015fenlere prop’lar arac\u0131l\u0131\u011f\u0131yla. Bu, uygulaman\u0131n durumunu tahmin edilebilir k\u0131lar ve hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r. Ancak, bir veri par\u00e7as\u0131n\u0131n bile\u015fen a\u011fac\u0131nda birka\u00e7 katman derine iletilmesi gerekti\u011finde, her ara bile\u015fenin bu prop’u yaln\u0131zca iletmek i\u00e7in almas\u0131 ve alt bile\u015fenine aktarmas\u0131 gerekir. Bu duruma “prop drilling” (prop delme) denir.<\/p>\n
\u00d6rne\u011fin, App<\/code> bile\u015feninde tan\u0131mlanm\u0131\u015f bir kullan\u0131c\u0131 nesnesini, App<\/code> -> Dashboard<\/code> -> Sidebar<\/code> -> UserAvatar<\/code> \u015feklinde d\u00f6rt katman derindeki UserAvatar<\/code> bile\u015fenine iletmek istedi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Bu durumda, Dashboard<\/code> ve Sidebar<\/code> bile\u015fenlerinin, kendi i\u00e7lerinde bu kullan\u0131c\u0131 verisini kullanmasalar bile, onu sadece UserAvatar<\/code>‘a aktarmak i\u00e7in prop olarak almalar\u0131 gerekir.<\/p>\n\/\/ App.js\nfunction App() {\n const user = { name: 'Alice', avatarUrl: '...' };\n return