[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:en: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","en",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```\nStarting from `count = 0`, the button is clicked once. What does it show afterward?",[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, unchanged","Both calls read `count` from the same render's snapshot, which is 0 for the whole event. So both calls are effectively `setCount(0 + 1)`; React does not re-run the function body between them, it just schedules the same replacement value twice. The result is 1, not 2. The updater-function form (`c => c + 1`) is what would make each call build on the previous one.",{"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```\nStarting from `score = 0`, the button is clicked once. After both `setTimeout` callbacks have fired, what does it show?",[173,174,175,176],{"key":157,"text":158},{"key":160,"text":161},{"key":163,"text":164},{"key":166,"text":167},"Each `setTimeout` callback runs later, on its own turn of the event loop, well after `handleClick`'s own closure over `score` is stale. Because each call uses the updater form `s => s + 1`, React applies it to whatever the latest state is at the time it runs, not to the `score` variable captured when `handleClick` was defined — so the first callback turns `0` into `1`, and the second turns that `1` into `2`. Had these instead read the outer `score` directly (`setScore(score + 1)`), both callbacks would have closed over the same stale `0` and the result would incorrectly stay `1`. Verified in React 19 (jsdom): after mounting the button shows `0`; clicking it and letting both timeouts run shows `2`.",{"id":179,"topic":9,"difficulty":153,"body":180,"options":181,"correct_key":163,"explanation":190},"019f5be4-0ad7-7bb9-b0d8-792192854790","A button's click handler needs to reliably add 1 to a counter, and it may sometimes call the increment logic more than once within the same event (e.g. a shared helper called twice). Which practice avoids losing one of the increments?",[182,184,186,188],{"key":157,"text":183},"Calling `setCount(count + 1)` repeatedly, relying on the outer `count` variable each time",{"key":160,"text":185},"Removing the `count` state entirely and using a plain module-level variable instead",{"key":163,"text":187},"Using the updater-function form, `setCount(c => c + 1)`, for each call",{"key":166,"text":189},"Re-mounting the component after every increment so state starts fresh","The updater form always operates on the most recently queued value, so stacking several calls in the same event correctly accumulates. Reading the outer `count` variable repeatedly reuses the same render's snapshot and silently drops updates, which is the bug this practice avoids.",{"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```\nIf `Page` re-renders 3 times (e.g. because its parent re-renders), how many times does `computeExpensiveDefault()` actually run?",[195,197,199,201],{"key":157,"text":196},"Once, only on the first render",{"key":160,"text":198},"Zero times, React caches the argument expression automatically",{"key":163,"text":200},"Once, only on the last render",{"key":166,"text":202},"Once per render, so 3 times total","`computeExpensiveDefault()` is a plain JavaScript expression sitting in the argument position; JavaScript evaluates it every time the component function runs, regardless of whether `useState` ends up using the result. `useState` only USES the value on the very first render and throws away the result on later ones — but it does not stop the expression itself from being evaluated. That's exactly why lazy init, `useState(() => computeExpensiveDefault())`, exists.",{"id":205,"topic":9,"difficulty":206,"body":207,"options":208,"correct_key":157,"explanation":217},"019f5be4-0ad9-7285-a05c-bf551720d2e4",1,"You have an expensive calculation that should run exactly once, on the component's first render, to produce the initial state. Which is the correct `useState` usage?",[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)`, then call `setState` inside a `useEffect`","Passing a function to `useState` is the lazy-initializer form: React calls that function only on the first render to compute the initial value, and never calls it again on later renders. Passing the already-called result (b) still evaluates the expensive call on every render even though the value is discarded.",{"id":219,"topic":9,"difficulty":206,"body":220,"options":221,"correct_key":160,"explanation":230},"019f5be4-0ad9-7afe-9608-83e01d85deb4","In `const [value, setValue] = useState(initialValue);`, on which render(s) is `initialValue` actually used to set the state?",[222,224,226,228],{"key":157,"text":223},"It is re-evaluated and assigned to state on every render",{"key":160,"text":225},"Only on the component's very first render",{"key":163,"text":227},"Only when the component unmounts",{"key":166,"text":229},"Only if `initialValue` was itself derived from a prop","React only reads the argument passed to `useState` the first time that hook call runs for a given component instance; on every subsequent render, `useState` returns the stored state and ignores whatever expression is currently sitting in the argument position.",{"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},[413,10],"tr",[415,416],"google","github",21750,true]