[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:tr:frontend\u002Freact-hooks-state":4,"config":231},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-hooks-state","React Hooks 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,75,78,81,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":73,"name":74,"count":11},"react-context-state","React Context State",{"key":76,"name":77,"count":11},"react-effects-lifecycle","React Effects Lifecycle",{"key":79,"name":80,"count":11},"react-forms-suspense","React Forms Suspense",{"key":8,"name":9,"count":11},{"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,178,191,204,218],{"id":152,"topic":9,"difficulty":153,"body":154,"options":155,"correct_key":157,"explanation":168},"019f5be4-0ad6-7374-85fb-5b6d29f5326b",2,"```jsx\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    \u003Cbutton onClick={() => {\n      setCount(count + 1);\n      setCount(count + 1);\n    }}>{count}\u003C\u002Fbutton>\n  );\n}\n```\n`count = 0` iken butona bir kez tıklanıyor. Tıklamadan sonra ekranda ne görünür?",[156,159,162,165],{"key":157,"text":158},"a","1",{"key":160,"text":161},"b","2",{"key":163,"text":164},"c","NaN",{"key":166,"text":167},"d","0, değişmez","Her iki çağrı da `count`'u aynı render'ın snapshot'ından okur; bu değer tüm event boyunca 0'dır. Yani her iki çağrı da aslında `setCount(0 + 1)`'dir; React aralarında fonksiyon gövdesini yeniden çalıştırmaz, sadece aynı yerine-koyma değerini iki kez planlar. Sonuç 2 değil 1'dir. Her çağrının bir öncekinin üzerine inşa edilmesini sağlayan şey updater-fonksiyon formudur (`c => c + 1`).",{"id":170,"topic":9,"difficulty":153,"body":171,"options":172,"correct_key":160,"explanation":177},"019f5be4-0ad7-71f3-8545-f0329ad22382","```jsx\nfunction ScoreBoard() {\n  const [score, setScore] = useState(0);\n  const handleClick = () => {\n    setTimeout(() => setScore(s => s + 1), 0);\n    setTimeout(() => setScore(s => s + 1), 0);\n  };\n  return \u003Cbutton onClick={handleClick}>{score}\u003C\u002Fbutton>;\n}\n```\n`score = 0` iken butona bir kez tıklanıyor. Her iki `setTimeout` callback'i de çalıştıktan sonra ekranda ne görünür?",[173,174,175,176],{"key":157,"text":158},{"key":160,"text":161},{"key":163,"text":164},{"key":166,"text":167},"Her `setTimeout` callback'i daha sonra, event loop'un kendi turunda çalışır — bu sırada `handleClick`'in `score` üzerindeki closure'ı çoktan bayatlamıştır. Her çağrı updater formunu (`s => s + 1`) kullandığından, React bunu `handleClick` tanımlanırken yakalanan `score` değişkenine değil, callback çalıştığı anda en güncel state ne ise ona uygular — bu yüzden ilk callback `0`'ı `1`'e çevirir, ikincisi de bu `1`'i `2`'ye çevirir. Bunlar yerine doğrudan dış `score`'u okusaydı (`setScore(score + 1)`), her iki callback de aynı bayat `0`'ı yakalardı ve sonuç yanlış biçimde `1`'de kalırdı. React 19'da (jsdom) doğrulandı: mount sonrası buton `0` gösteriyor; tıklanıp her iki timeout da çalıştıktan sonra `2` gösteriyor.",{"id":179,"topic":9,"difficulty":153,"body":180,"options":181,"correct_key":163,"explanation":190},"019f5be4-0ad7-7bb9-b0d8-792192854790","Bir butonun click handler'ı sayacı güvenilir biçimde 1 artırmalı, ancak bazen artırma mantığı aynı event içinde birden fazla kez çağrılabiliyor (ör. paylaşılan bir yardımcı fonksiyon iki kez tetikleniyor). Artırmalardan birinin kaybolmasını hangi pratik önler?",[182,184,186,188],{"key":157,"text":183},"Her seferinde dış kapsamdaki `count` değişkenine dayanarak `setCount(count + 1)`'i tekrar tekrar çağırmak",{"key":160,"text":185},"`count` state'ini tamamen kaldırıp yerine modül seviyesinde düz bir değişken kullanmak",{"key":163,"text":187},"Her çağrı için updater-fonksiyon formunu, `setCount(c => c + 1)`, kullanmak",{"key":166,"text":189},"Her artırmadan sonra component'i yeniden mount edip state'i sıfırdan başlatmak","Updater formu her zaman en son sıraya konmuş değer üzerinden çalışır, bu yüzden aynı event içinde birden fazla çağrı üst üste doğru şekilde birikir. Dış kapsamdaki `count` değişkenini tekrar tekrar okumak aynı render'ın snapshot'ını yeniden kullanır ve güncellemelerden birini sessizce kaybeder — bu pratiğin önlediği bug tam olarak budur.",{"id":192,"topic":9,"difficulty":153,"body":193,"options":194,"correct_key":166,"explanation":203},"019f5be4-0ad8-7726-b6cd-e44f7487cf6c","```jsx\nfunction Page() {\n  const [data] = useState(computeExpensiveDefault());\n  return \u003Cdiv>{data}\u003C\u002Fdiv>;\n}\n```\n`Page`, parent'ı yeniden render olduğu için 3 kez yeniden render edilirse, `computeExpensiveDefault()` fiilen kaç kez çalışır?",[195,197,199,201],{"key":157,"text":196},"Yalnızca bir kez, ilk render'da",{"key":160,"text":198},"Hiç çalışmaz, React argüman ifadesini otomatik olarak cache'ler",{"key":163,"text":200},"Yalnızca bir kez, son render'da",{"key":166,"text":202},"Her render'da bir kez, toplam 3 kez","`computeExpensiveDefault()`, argüman konumunda duran sıradan bir JavaScript ifadesidir; JavaScript bunu, `useState`'in sonucu kullanıp kullanmayacağından bağımsız olarak, component fonksiyonu her çalıştığında değerlendirir. `useState` değeri yalnızca ilk render'da KULLANIR ve sonrakilerde sonucu atar — ama bu, ifadenin bizzat değerlendirilmesini durdurmaz. Lazy init'in, `useState(() => computeExpensiveDefault())`'un, var olma sebebi tam olarak budur.",{"id":205,"topic":9,"difficulty":206,"body":207,"options":208,"correct_key":157,"explanation":217},"019f5be4-0ad9-7285-a05c-bf551720d2e4",1,"Component'in ilk render'ında başlangıç state'ini üretmek için tam olarak bir kez çalışması gereken pahalı bir hesaplaman var. Doğru `useState` kullanımı hangisi?",[209,211,213,215],{"key":157,"text":210},"`useState(() => computeExpensiveDefault())`",{"key":160,"text":212},"`useState(computeExpensiveDefault())`",{"key":163,"text":214},"`useState(useMemo(computeExpensiveDefault))`",{"key":166,"text":216},"`useState(null)` yazıp bir `useEffect` içinde `setState` çağırmak","`useState`'e bir fonksiyon geçmek lazy-initializer formudur: React bu fonksiyonu yalnızca ilk render'da çağırıp başlangıç değerini hesaplar, sonraki render'larda bir daha çağırmaz. Zaten çağrılmış sonucu geçmek (b) ise, değer atılsa bile pahalı çağrının her render'da değerlendirilmesine yol açar.",{"id":219,"topic":9,"difficulty":206,"body":220,"options":221,"correct_key":160,"explanation":230},"019f5be4-0ad9-7afe-9608-83e01d85deb4","`const [value, setValue] = useState(initialValue);` satırında, `initialValue` state'i ayarlamak için fiilen hangi render'da\u002Frender'larda kullanılır?",[222,224,226,228],{"key":157,"text":223},"Her render'da yeniden değerlendirilip state'e atanır",{"key":160,"text":225},"Yalnızca component'in ilk render'ında",{"key":163,"text":227},"Yalnızca component unmount olduğunda",{"key":166,"text":229},"Yalnızca `initialValue` bir prop'tan türetilmişse","React, `useState`'e geçilen argümanı yalnızca belirli bir component instance'ı için bu hook çağrısı ilk çalıştığında okur; sonraki her render'da `useState` saklanan state'i döndürür ve argüman konumunda o an ne ifade duruyorsa onu yok sayar.",{"fields":232,"seniorities":406,"interview_shapes":407,"locales":412,"oauth":414,"question_count":417,"coach_enabled":418,"jd_match_enabled":418},[233,258,266,283,307,320,339,358,380,387,393,400],{"key":234,"name_tr":235,"name_en":235,"sort":206,"specializations":236},"backend","Backend",[237,240,243,246,249,252,255],{"key":238,"name":239,"field":234},"general","Genel",{"key":241,"name":242,"field":234},"go","Go",{"key":244,"name":245,"field":234},"python","Python",{"key":247,"name":248,"field":234},"java","Java",{"key":250,"name":251,"field":234},"csharp","C#\u002F.NET",{"key":253,"name":254,"field":234},"nodejs","Node.js",{"key":256,"name":257,"field":234},"php","PHP",{"key":5,"name_tr":6,"name_en":6,"sort":153,"specializations":259},[260,261,262,263,264,265],{"key":238,"name":239,"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":267,"name_tr":268,"name_en":268,"sort":269,"specializations":270},"fullstack","Fullstack",3,[271,272,273,274,275,276,277,278,279,280,281,282],{"key":238,"name":239,"field":267},{"key":241,"name":242,"field":234},{"key":244,"name":245,"field":234},{"key":247,"name":248,"field":234},{"key":250,"name":251,"field":234},{"key":253,"name":254,"field":234},{"key":256,"name":257,"field":234},{"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":284,"name_tr":285,"name_en":285,"sort":286,"specializations":287},"devops-cloud","DevOps \u002F Cloud",4,[288,289,292,295,298,301,304],{"key":238,"name":239,"field":284},{"key":290,"name":291,"field":284},"aws","AWS",{"key":293,"name":294,"field":284},"gcp","GCP",{"key":296,"name":297,"field":284},"azure","Azure",{"key":299,"name":300,"field":284},"kubernetes","Kubernetes",{"key":302,"name":303,"field":284},"terraform","Terraform",{"key":305,"name":306,"field":284},"linux","Linux",{"key":308,"name_tr":309,"name_en":309,"sort":310,"specializations":311},"ai-engineer","AI Engineer",5,[312,313,314,317],{"key":238,"name":239,"field":308},{"key":244,"name":245,"field":308},{"key":315,"name":316,"field":308},"llm-rag","LLM\u002FRAG",{"key":318,"name":319,"field":308},"mlops","MLOps",{"key":321,"name_tr":322,"name_en":323,"sort":324,"specializations":325},"database","Veritabanı","Database",6,[326,327,330,333,336],{"key":238,"name":239,"field":321},{"key":328,"name":329,"field":321},"postgresql","PostgreSQL",{"key":331,"name":332,"field":321},"mysql","MySQL",{"key":334,"name":335,"field":321},"mongodb","MongoDB",{"key":337,"name":338,"field":321},"redis","Redis",{"key":340,"name_tr":341,"name_en":342,"sort":343,"specializations":344},"mobile","Mobil","Mobile",7,[345,346,349,352,355],{"key":238,"name":239,"field":340},{"key":347,"name":348,"field":340},"ios-swift","iOS (Swift)",{"key":350,"name":351,"field":340},"android-kotlin","Android (Kotlin)",{"key":353,"name":354,"field":340},"flutter","Flutter",{"key":356,"name":357,"field":340},"react-native","React Native",{"key":359,"name_tr":360,"name_en":361,"sort":362,"specializations":363},"security","Güvenlik","Security",8,[364,365,368,371,374,377],{"key":238,"name":239,"field":359},{"key":366,"name":367,"field":359},"appsec","AppSec",{"key":369,"name":370,"field":359},"offensive-pentest","Offensive \u002F Pentest",{"key":372,"name":373,"field":359},"cloud-security","Cloud Security",{"key":375,"name":376,"field":359},"devsecops","DevSecOps",{"key":378,"name":379,"field":359},"blue-team-incident","Blue Team \u002F Incident",{"key":381,"name_tr":382,"name_en":383,"sort":384,"specializations":385},"qa-test-automation","QA \u002F Test Otomasyonu","QA \u002F Test Automation",9,[386],{"key":238,"name":239,"field":381},{"key":388,"name_tr":389,"name_en":389,"sort":390,"specializations":391},"data-engineer","Data Engineer",10,[392],{"key":238,"name":239,"field":388},{"key":394,"name_tr":395,"name_en":396,"sort":397,"specializations":398},"game-dev","Oyun Geliştirme","Game Development",11,[399],{"key":238,"name":239,"field":394},{"key":401,"name_tr":402,"name_en":402,"sort":403,"specializations":404},"ml-engineer","ML Engineer",12,[405],{"key":238,"name":239,"field":401},[14,15,16],{"junior":408,"mid":410,"senior":411},{"questions":409,"median_sec":3},20,{"questions":409,"median_sec":3},{"questions":409,"median_sec":3},[10,413],"en",[415,416],"google","github",21750,true]