React, bile\u015fen tabanl\u0131 mimarisiyle modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fenler aras\u0131 veri ak\u0131\u015f\u0131, React’\u0131n temelini olu\u015fturur. Genellikle bu ak\u0131\u015f, ebeveyn bile\u015fenden \u00e7ocuk bile\u015fene “prop”lar arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015fir. Ancak, uygulama b\u00fcy\u00fcd\u00fck\u00e7e ve bile\u015fen a\u011fac\u0131 derinle\u015ftik\u00e7e, baz\u0131 verilerin bir\u00e7ok ara bile\u015fenden ge\u00e7irilmesi gerekebilir, bu da “prop drilling” olarak bilinen bir soruna yol a\u00e7ar. Prop drilling, kodun okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve yeniden d\u00fczenlenmesini zorla\u015ft\u0131r\u0131r.<\/p>\n
React Context API, bu sorunu \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc bir \u00f6zelliktir. Bile\u015fen a\u011fac\u0131nda, prop’lar\u0131 her seviyeden manuel olarak ge\u00e7irmeden veri payla\u015f\u0131m\u0131 yapman\u0131n bir yolunu sunar. Bu makalede, React’\u0131n “yeni” Context API’\u0131n\u0131 (React 16.3’ten itibaren kararl\u0131 hale gelen ve React’te veri ak\u0131\u015f\u0131 genellikle tek y\u00f6nl\u00fcd\u00fcr: ebeveynden \u00e7ocu\u011fa. Bir bile\u015fenin bir alt bile\u015fenine veri g\u00f6ndermesi gerekti\u011finde, bu veriyi prop olarak iletir. Ancak, veri do\u011frudan bir alt bile\u015fene de\u011fil de, o alt bile\u015fenin i\u00e7indeki ba\u015fka bir alt bile\u015fene (yani daha derindeki bir bile\u015fene) gitmesi gerekiyorsa, bu veri aradaki t\u00fcm bile\u015fenlerden prop olarak ge\u00e7irilmek zorunda kal\u0131r. Bu duruma “prop drilling” denir.<\/p>\n \u00d6rne\u011fin, bir useContext<\/code> hook’u ile \u00e7ok daha g\u00fc\u00e7l\u00fc hale gelen versiyonunu) derinlemesine inceleyece\u011fiz. Ne oldu\u011funu, nas\u0131l kullan\u0131laca\u011f\u0131n\u0131, performans ipu\u00e7lar\u0131n\u0131 ve ne zaman kullan\u0131lmas\u0131 gerekti\u011fini detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z.<\/p>\nProp Drilling Problemi ve Context’in Gerek\u00e7esi<\/h3>\n
App<\/code> bile\u015feniniz oldu\u011funu ve bu bile\u015fenin bir User<\/code> bile\u015fenine, User<\/code> bile\u015feninin de bir Avatar<\/code> bile\u015fenine ihtiyac\u0131 olan theme<\/code> verisini tuttu\u011funu varsayal\u0131m:<\/p>\n\/\/ App.jsx\nfunction App() {\n const theme = { primaryColor: 'blue', secondaryColor: 'lightgray' };\n return