[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:tr:frontend\u002Freact-context-state":4,"config":235},null,{"field_key":5,"field_name":6,"seniority":7,"topic_key":8,"topic_name":9,"spec_key":7,"spec_name":7,"locale":10,"cell_total":11,"field_total":12,"seniorities":13,"topics":17,"specs":133,"samples":150},"frontend","Frontend","","react-context-state","React Context State","tr",75,2925,[14,15,16],"junior","mid","senior",[18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,73,76,79,82,85,88,91,94,97,100,103,106,109,112,115,118,121,124,127,130],{"key":19,"name":20,"count":11},"accessibility","Accessibility",{"key":22,"name":23,"count":11},"angular-change-detection","Angular Change Detection",{"key":25,"name":26,"count":11},"angular-components-lifecycle","Angular Components Lifecycle",{"key":28,"name":29,"count":11},"angular-dependency-injection","Angular Dependency Injection",{"key":31,"name":32,"count":11},"angular-directives-pipes","Angular Directives Pipes",{"key":34,"name":35,"count":11},"angular-router-forms","Angular Router Forms",{"key":37,"name":38,"count":11},"angular-testing-performance","Angular Testing Performance",{"key":40,"name":41,"count":11},"css-layout","Css Layout",{"key":43,"name":44,"count":11},"dom-browser-apis","Dom Browser Apis",{"key":46,"name":47,"count":11},"javascript-async-concurrency","Javascript Async Concurrency",{"key":49,"name":50,"count":11},"javascript-language","Javascript Language",{"key":52,"name":53,"count":11},"javascript-memory-performance","Javascript Memory Performance",{"key":55,"name":56,"count":11},"javascript-modules-bundling","Javascript Modules Bundling",{"key":58,"name":59,"count":11},"javascript-prototypes-oop","Javascript Prototypes Oop",{"key":61,"name":62,"count":11},"javascript-runtime-apis","Javascript Runtime Apis",{"key":64,"name":65,"count":11},"javascript-testing-tooling","Javascript Testing Tooling",{"key":67,"name":68,"count":11},"performance","Performance",{"key":70,"name":71,"count":11},"react-components-jsx","React Components Jsx",{"key":8,"name":9,"count":11},{"key":74,"name":75,"count":11},"react-effects-lifecycle","React Effects Lifecycle",{"key":77,"name":78,"count":11},"react-forms-suspense","React Forms Suspense",{"key":80,"name":81,"count":11},"react-hooks-state","React Hooks State",{"key":83,"name":84,"count":11},"react-rendering-performance","React Rendering Performance",{"key":86,"name":87,"count":11},"rendering-reactivity","Rendering Reactivity",{"key":89,"name":90,"count":11},"state-management","State Management",{"key":92,"name":93,"count":11},"testing","Testing",{"key":95,"name":96,"count":11},"typescript-advanced-types","Typescript Advanced Types",{"key":98,"name":99,"count":11},"typescript-generics","Typescript Generics",{"key":101,"name":102,"count":11},"typescript-modules-declarations","Typescript Modules Declarations",{"key":104,"name":105,"count":11},"typescript-narrowing-control-flow","Typescript Narrowing Control Flow",{"key":107,"name":108,"count":11},"typescript-tooling-config","Typescript Tooling Config",{"key":110,"name":111,"count":11},"typescript-type-fundamentals","Typescript Type Fundamentals",{"key":113,"name":114,"count":11},"vue-components-props","Vue Components Props",{"key":116,"name":117,"count":11},"vue-composition-api","Vue Composition Api",{"key":119,"name":120,"count":11},"vue-directives-templates","Vue Directives Templates",{"key":122,"name":123,"count":11},"vue-performance-testing","Vue Performance Testing",{"key":125,"name":126,"count":11},"vue-reactivity-system","Vue Reactivity System",{"key":128,"name":129,"count":11},"vue-router-state-management","Vue Router State Management",{"key":131,"name":132,"count":11},"web-security","Web Security",[134,138,141,144,147],{"key":135,"name":136,"count":137},"angular","Angular",450,{"key":139,"name":140,"count":137},"javascript","JavaScript",{"key":142,"name":143,"count":137},"react","React",{"key":145,"name":146,"count":137},"typescript","TypeScript",{"key":148,"name":149,"count":137},"vue","Vue",[151,169,183,196,209,222],{"id":152,"topic":9,"difficulty":153,"body":154,"options":155,"correct_key":157,"explanation":168},"019f5be4-0a8b-7b44-8e66-afbf9684b7c4",1,"İki kardeş component, `SearchBox` ve `ResultsList`, aynı `query` string'ine ihtiyaç duyuyor — `SearchBox` yazıyor, `ResultsList` okuyor. Şu an ikisinin de kendi lokal `useState`'i var, bu yüzden senkron değiller. İdiomatik React çözümü nedir?",[156,159,162,165],{"key":157,"text":158},"a","`query` state'ini ortak parent'a taşı, değeri ve bir updater'ı her iki child'a prop olarak aşağı geçir",{"key":160,"text":161},"b","`ResultsList`'e, `SearchBox`'ın DOM node'unu poll'layıp güncel input değerini okuyan bir `useEffect` ekle",{"key":163,"text":164},"c","`query`'yi `ResultsList`'in her render'da okuduğu global mutable bir değişkende tut",{"key":166,"text":167},"d","Her iki kardeşi de kendi ayrı `Context.Provider`'ına sar, böylece birbirlerine doğrudan state yayınlasınlar","Kardeş component'ler doğrudan birbirleriyle konuşarak state paylaşamaz — React'te veri props üzerinden aşağı akar, yana değil. Standart çözüm 'state'i yukarı taşımak': state'i en yakın ortak parent'a taşı, sonra değeri ve bir setter'ı her iki child'a prop olarak geçir. Bu tek bir doğruluk kaynağı garanti eder. Burada Context'e başvurmak, bir seviye arayla duran iki kardeş için abartı; Context, bir değerin çok sayıda seviyeyi ya da alakasız dalı geçmesi gerektiğinde işe yarar, basit bir 'iki child'lı tek parent' durumunda değil.",{"id":170,"topic":9,"difficulty":171,"body":172,"options":173,"correct_key":160,"explanation":182},"019f5be4-0a8c-7d12-a77e-896ed8dbb58c",2,"React'in veri akışında, bir child component parent'a bir şeyin olduğunu bildirmek zorunda (örn. bir butona tıklandı). \"Props aşağı, event yukarı\" modeline en doğru uyan ifade hangisi?",[174,176,178,180],{"key":157,"text":175},"Child, bir prop objesini doğrudan mutasyona uğratır, parent obje değiştiği için re-render olur",{"key":160,"text":177},"Parent aşağı bir callback prop geçirir; child bunu çağırır, parent buna karşılık kendi state'ini günceller",{"key":163,"text":179},"Child, parent'ın kendi listener'ının yakaladığı native bir DOM `CustomEvent`'i dispatch eder",{"key":166,"text":181},"Child, parent component'in modülünü import edip onun internal state setter'ını doğrudan çağırır","Veri props olarak aşağı akar; ters yöne giden her şey, child'ın parent'a geriye uzanmasıyla değil, parent'ın aşağı verdiği bir fonksiyon üzerinden gitmek zorunda. Parent bir callback tanımlar (örn. `onSearch`), aşağı geçirir, child event olduğunda bunu çağırır, ve gerçekte re-render'a yol açan şey parent'ın kendi `useState` güncellemesidir. Geçirilen bir prop objesini mutasyona uğratmak (a) React'in props kurallarını bozar, başka bir modülün internal'ine uzanmak da (d) component'lerin iletişim şekli değildir.",{"id":184,"topic":9,"difficulty":153,"body":185,"options":186,"correct_key":163,"explanation":195},"019f5be4-0a8d-789b-99a8-d63ccebd332e","React'te `createContext('light')`, `'light'`'ı context'in default değeri olarak ayarlar. Bu context'i `useContext` ile okuyan bir component, bu default `'light'` değerini tam olarak ne zaman alır?",[187,189,191,193],{"key":157,"text":188},"Context için uygulamanın herhangi bir yerinde en az bir Provider mount edilmişse, o Provider'a hangi `value` verildiğinden bağımsız olarak",{"key":160,"text":190},"Yalnızca bir Provider `value={null}` geçerse; `value={undefined}` geçen bir Provider hâlâ `'light'`'a düşer",{"key":163,"text":192},"Yalnızca kapsayan hiçbir Provider yoksa; `value={undefined}` geçen bir Provider yine de kazanır ve component `'light'` değil `undefined` okur",{"key":166,"text":194},"Yalnızca component'in ilk render'ında; üstünde gerçek bir değerle bir Provider mount edilse bile sonraki render'lar hâlâ `'light'` döner","`createContext`'e verilen default argüman, yalnızca `useContext`'in kapsayan hiçbir Provider bulamadığı durumlarda kullanılan bir yedektir — açık bir `value` ile birleştirilmez ya da onun yerine geçmez. `\u003CThemeContext.Provider value={undefined}>` hâlâ bir Provider'dır: default'a karşı kazanır, bu yüzden `useContext` `'light'` değil `undefined` okur. React 19'da üç kardeş component yan yana render edilerek doğrulandı — Provider'ı olmayan biri (`'light'` okur), `value={undefined}` ile Provider'a sarılı biri (`undefined` okur), `value='dark'` ile Provider'a sarılı biri (`'dark'` okur) — default'un yalnızca ilk durumda geçerli olduğu doğrulandı.",{"id":197,"topic":9,"difficulty":171,"body":198,"options":199,"correct_key":166,"explanation":208},"019f5be4-0a8d-7f1e-86ae-91aafbc4edbd","Bir ağaç `App -> Page -> Section` şeklinde (sadece bir seviye geçiş var), ve `Section`, `App`'in tuttuğu bir `currentUser` değerine ihtiyaç duyuyor. Bir takım arkadaşı bunun zaten tam bir Context kurulumunu gerektirdiğinde ısrarcı. Junior seviyesinde en makul bakış açısı hangisi?",[200,202,204,206],{"key":157,"text":201},"Katılıyorum — tek bir component üzerinden geçen her prop bile prop drilling'dir ve Context kullanılmalı",{"key":160,"text":203},"Katılmıyorum — uygulama Redux da kullanmadıkça Context asla kullanılmamalı",{"key":163,"text":205},"Katılıyorum — bir değer ağaçta herhangi bir yerde birden fazla component tarafından okunuyorsa Context zorunludur",{"key":166,"text":207},"Katılmıyorum — tek bir ara component üzerinden geçmek ucuz; Context henüz değmeyen bir dolayım ekliyor","Tek bir ara component üzerinden tek bir sıçrama, ucuz ve takip etmesi kolay bir durumdur, Context'in çözmeyi amaçladığı derin ya da geniş zincir türünden değildir. Buraya Context sokmak, tek bir prop'un zaten temiz şekilde çözdüğü bir sorun için bir Provider, bir consumer hook'u ve fazladan bir dolayım katmanı ekler. Context, zincir birkaç seviye derinleştiğinde ya da değerin aynı anda birçok alakasız dala ulaşması gerektiğinde işe yaramaya başlar.",{"id":210,"topic":9,"difficulty":153,"body":211,"options":212,"correct_key":157,"explanation":221},"019f5be4-0a8e-79a6-9371-0541a137fd50","```\nconst ThemeContext = createContext('light')\n\nfunction Toolbar() {\n  return \u003CButton \u002F>\n}\n\nfunction Button() {\n  const theme = useContext(ThemeContext)\n  return \u003Cbutton className={theme}>Kaydet\u003C\u002Fbutton>\n}\n\nfunction App() {\n  return (\n    \u003CThemeContext.Provider value=\"dark\">\n      \u003CToolbar \u002F>\n    \u003C\u002FThemeContext.Provider>\n  )\n}\n```\nRender edilen `\u003Cbutton>` hangi `className`'e sahip olur?",[213,215,217,219],{"key":157,"text":214},"\"dark\" — `Button`, aradaki `Toolbar`'a bakmaksızın, en yakın Provider'dan değeri okur",{"key":160,"text":216},"`\"light\"` — `Toolbar` onu prop olarak iletmediği için `Button` her zaman `createContext`'in default değerini alır",{"key":163,"text":218},"`undefined` — `useContext` yalnızca çağıran component Provider'ın direkt child'ıysa çalışır",{"key":166,"text":220},"`\"dark\"`, ama yalnızca ikinci render'dan itibaren","Context hiç props üzerinden geçmez — ne kadar derinde olursa olsun herhangi bir descendant `useContext` çağırıp en yakın kapsayan Provider'dan değeri alabilir. Aradaki `Toolbar`'ın context'in varlığını bilmesine hiç gerek yoktur. Bu yüzden `Button`, `Toolbar` hiçbir şey iletmeden, doğrudan ilk render'da `\"dark\"` okur.",{"id":223,"topic":9,"difficulty":171,"body":224,"options":225,"correct_key":160,"explanation":234},"019f5be4-0a8f-7339-8477-dd9d1b647e97","```\nconst ThemeContext = createContext('light')\n\nfunction Label() {\n  const theme = useContext(ThemeContext)\n  return \u003Cspan>{theme}\u003C\u002Fspan>\n}\n\nfunction App() {\n  return (\n    \u003Cdiv>\n      \u003CThemeContext.Provider value=\"dark\">\n        {\u002F* Label BURAYA konmadı *\u002F}\n      \u003C\u002FThemeContext.Provider>\n      \u003CLabel \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n```\n`\u003CLabel \u002F>` hangi metni render eder?",[226,228,230,232],{"key":157,"text":227},"`\"dark\"` — `App` ağacında bir yerde `ThemeContext` için bir Provider var",{"key":160,"text":229},"\"light\" — `Label` o Provider'ın descendant'ı değil, bu yüzden default değere düşer",{"key":163,"text":231},"Render sırasında hata fırlatılır çünkü `Label` hiçbir Provider ile sarılmamış",{"key":166,"text":233},"Boş string, çünkü context değerleri yalnızca effect içinde çözülür, render sırasında değil","Bir Provider yalnızca içinde render edilen component'leri etkiler. Burada `Label`, `ThemeContext.Provider`'ın child'ı değil, kardeşi; yani `Label`'ın bakış açısından hiçbir kapsayan Provider yok — `useContext`, `createContext('light')`'a geçirilen default değeri döner. Bu klasik sessiz-bug örüntüsüdür: Provider dosyada var ama kablolama tüketiciyi onun subtree'sinin dışına koyuyor, ve hiçbir şey hata vermiyor — sessizce default'a düşüyor.",{"fields":236,"seniorities":410,"interview_shapes":411,"locales":416,"oauth":418,"question_count":421,"coach_enabled":422,"jd_match_enabled":422},[237,262,270,287,311,324,343,362,384,391,397,404],{"key":238,"name_tr":239,"name_en":239,"sort":153,"specializations":240},"backend","Backend",[241,244,247,250,253,256,259],{"key":242,"name":243,"field":238},"general","Genel",{"key":245,"name":246,"field":238},"go","Go",{"key":248,"name":249,"field":238},"python","Python",{"key":251,"name":252,"field":238},"java","Java",{"key":254,"name":255,"field":238},"csharp","C#\u002F.NET",{"key":257,"name":258,"field":238},"nodejs","Node.js",{"key":260,"name":261,"field":238},"php","PHP",{"key":5,"name_tr":6,"name_en":6,"sort":171,"specializations":263},[264,265,266,267,268,269],{"key":242,"name":243,"field":5},{"key":139,"name":140,"field":5},{"key":145,"name":146,"field":5},{"key":142,"name":143,"field":5},{"key":148,"name":149,"field":5},{"key":135,"name":136,"field":5},{"key":271,"name_tr":272,"name_en":272,"sort":273,"specializations":274},"fullstack","Fullstack",3,[275,276,277,278,279,280,281,282,283,284,285,286],{"key":242,"name":243,"field":271},{"key":245,"name":246,"field":238},{"key":248,"name":249,"field":238},{"key":251,"name":252,"field":238},{"key":254,"name":255,"field":238},{"key":257,"name":258,"field":238},{"key":260,"name":261,"field":238},{"key":139,"name":140,"field":5},{"key":145,"name":146,"field":5},{"key":142,"name":143,"field":5},{"key":148,"name":149,"field":5},{"key":135,"name":136,"field":5},{"key":288,"name_tr":289,"name_en":289,"sort":290,"specializations":291},"devops-cloud","DevOps \u002F Cloud",4,[292,293,296,299,302,305,308],{"key":242,"name":243,"field":288},{"key":294,"name":295,"field":288},"aws","AWS",{"key":297,"name":298,"field":288},"gcp","GCP",{"key":300,"name":301,"field":288},"azure","Azure",{"key":303,"name":304,"field":288},"kubernetes","Kubernetes",{"key":306,"name":307,"field":288},"terraform","Terraform",{"key":309,"name":310,"field":288},"linux","Linux",{"key":312,"name_tr":313,"name_en":313,"sort":314,"specializations":315},"ai-engineer","AI Engineer",5,[316,317,318,321],{"key":242,"name":243,"field":312},{"key":248,"name":249,"field":312},{"key":319,"name":320,"field":312},"llm-rag","LLM\u002FRAG",{"key":322,"name":323,"field":312},"mlops","MLOps",{"key":325,"name_tr":326,"name_en":327,"sort":328,"specializations":329},"database","Veritabanı","Database",6,[330,331,334,337,340],{"key":242,"name":243,"field":325},{"key":332,"name":333,"field":325},"postgresql","PostgreSQL",{"key":335,"name":336,"field":325},"mysql","MySQL",{"key":338,"name":339,"field":325},"mongodb","MongoDB",{"key":341,"name":342,"field":325},"redis","Redis",{"key":344,"name_tr":345,"name_en":346,"sort":347,"specializations":348},"mobile","Mobil","Mobile",7,[349,350,353,356,359],{"key":242,"name":243,"field":344},{"key":351,"name":352,"field":344},"ios-swift","iOS (Swift)",{"key":354,"name":355,"field":344},"android-kotlin","Android (Kotlin)",{"key":357,"name":358,"field":344},"flutter","Flutter",{"key":360,"name":361,"field":344},"react-native","React Native",{"key":363,"name_tr":364,"name_en":365,"sort":366,"specializations":367},"security","Güvenlik","Security",8,[368,369,372,375,378,381],{"key":242,"name":243,"field":363},{"key":370,"name":371,"field":363},"appsec","AppSec",{"key":373,"name":374,"field":363},"offensive-pentest","Offensive \u002F Pentest",{"key":376,"name":377,"field":363},"cloud-security","Cloud Security",{"key":379,"name":380,"field":363},"devsecops","DevSecOps",{"key":382,"name":383,"field":363},"blue-team-incident","Blue Team \u002F Incident",{"key":385,"name_tr":386,"name_en":387,"sort":388,"specializations":389},"qa-test-automation","QA \u002F Test Otomasyonu","QA \u002F Test Automation",9,[390],{"key":242,"name":243,"field":385},{"key":392,"name_tr":393,"name_en":393,"sort":394,"specializations":395},"data-engineer","Data Engineer",10,[396],{"key":242,"name":243,"field":392},{"key":398,"name_tr":399,"name_en":400,"sort":401,"specializations":402},"game-dev","Oyun Geliştirme","Game Development",11,[403],{"key":242,"name":243,"field":398},{"key":405,"name_tr":406,"name_en":406,"sort":407,"specializations":408},"ml-engineer","ML Engineer",12,[409],{"key":242,"name":243,"field":405},[14,15,16],{"junior":412,"mid":414,"senior":415},{"questions":413,"median_sec":3},20,{"questions":413,"median_sec":3},{"questions":413,"median_sec":3},[10,417],"en",[419,420],"google","github",21750,true]