[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:en:frontend\u002Fstate-management":4,"config":236},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","","state-management","State Management","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,84,87,90,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":82,"name":83,"count":11},"react-hooks-state","React Hooks State",{"key":85,"name":86,"count":11},"react-rendering-performance","React Rendering Performance",{"key":88,"name":89,"count":11},"rendering-reactivity","Rendering Reactivity",{"key":8,"name":9,"count":11},{"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":160,"explanation":168},"019f56bb-ba9b-74fe-b4e3-e444bab988b7",1,"What is \"state\" in a UI component?",[156,159,162,165],{"key":157,"text":158},"a","Configuration values that are hard-coded once and can never change while the app runs",{"key":160,"text":161},"b","Data a component holds over time that can change and drive what the UI shows",{"key":163,"text":164},"c","The static HTML structure the browser parses before any scripting has run",{"key":166,"text":167},"d","Styling rules that determine how the component looks on the screen","State is the changing data a component owns; when it changes, the UI is expected to update to reflect it. Hard-coded constants (a) never change, so they are not state, and styling rules (d) describe appearance rather than the data behind the view.",{"id":170,"topic":9,"difficulty":171,"body":172,"options":173,"correct_key":163,"explanation":182},"019f56bb-ba9b-7a49-8e81-a3ac78f411ee",2,"In component-based UIs, how do state and props differ?",[174,176,178,180],{"key":157,"text":175},"State is passed in from a parent, while props are created and mutated inside the component itself",{"key":160,"text":177},"State and props are two names for the same thing; teams just pick one of them by convention",{"key":163,"text":179},"State is data a component owns and can change; props are values passed in from the outside",{"key":166,"text":181},"Props change freely over time, but state is fixed once the component has first been created","A component owns and changes its state, while props are inputs handed to it from a parent and are not meant to be rewritten by the child. Option (a) swaps the two definitions, and (d) is backwards — state is exactly the part that is meant to change over time.",{"id":184,"topic":9,"difficulty":171,"body":185,"options":186,"correct_key":157,"explanation":195},"019f56bb-ba9c-7142-8dac-52aad9548488","```\n\u002F\u002F items is the current state (a list)\nfunction addItem(items, newItem) {\n  items.push(newItem)   \u002F\u002F add to the same array\n  return items\n}\n```\nThe UI decides whether to re-render by comparing references (`old === new`). Why might the list fail to update on screen?",[187,189,191,193],{"key":157,"text":188},"`push` mutates the same array, so old and new references are identical and the check sees no change",{"key":160,"text":190},"`push` returns the new length, so this function ends up returning a number rather than the list",{"key":163,"text":192},"Arrays cannot be returned from a function, so the UI receives an empty value back",{"key":166,"text":194},"`push` builds a brand-new array, so the old references go invalid and get dropped","Mutating in place keeps the same array reference; a reference check (`old === new`) then reports \"no change\" and skips the re-render. The fix is to return a new array, e.g. `return [...items, newItem]`. Option (d) claims the opposite of what `push` does — `push` mutates the existing array, it does not create a new one.",{"id":197,"topic":9,"difficulty":153,"body":198,"options":199,"correct_key":166,"explanation":208},"019f56bb-ba9c-797a-b2ca-b4f8c488c0c4","What does the term \"prop drilling\" describe?",[200,202,204,206],{"key":157,"text":201},"Splitting one large component into several smaller and more narrowly focused components",{"key":160,"text":203},"Validating the values passed into a component before that component starts using them",{"key":163,"text":205},"Loading data from a server the moment a component first appears on the screen",{"key":166,"text":207},"Passing data down through many intermediate components that don't use it themselves","Prop drilling is threading a value through layers of components that merely forward it to reach a deep child; the middle components gain no use of the data but must relay it. Splitting a component (a) is unrelated decomposition, and validating inputs (b) is a separate concern entirely.",{"id":210,"topic":9,"difficulty":171,"body":211,"options":212,"correct_key":163,"explanation":221},"019f56bb-ba9d-7069-89d6-888b1786996e","Two sibling components must stay in sync on one value: a filter dropdown and a results list. Where should that value live?",[213,215,217,219],{"key":157,"text":214},"Duplicate it in both siblings and keep them in sync by copying it over on every change",{"key":160,"text":216},"Store it in a top-level variable outside all components as one global mutable value",{"key":163,"text":218},"Lift it into their closest common parent and pass it down to both siblings",{"key":166,"text":220},"Keep it inside the dropdown and let the list reach into the dropdown's internal state","When two siblings must share a value, the standard move is to lift the state into their nearest common ancestor and pass it down, giving one owner and one source of truth. Duplicating it (a) lets the two copies drift out of sync, and reaching into another component's internal state (d) breaks its encapsulation.",{"id":223,"topic":9,"difficulty":224,"body":225,"options":226,"correct_key":157,"explanation":235},"019f56bb-ba9d-7582-a6b8-6e7a689c38e9",3,"A cart keeps `items` in state. A developer also stores `totalPrice` in state and updates it in the 'add item' handler. A new 'remove item' path is added later but forgets to touch `totalPrice`. What is the underlying design problem?",[227,229,231,233],{"key":157,"text":228},"`totalPrice` is derivable from `items`, so storing it separately lets the two fall out of sync",{"key":160,"text":230},"`totalPrice` should have been stored as a string to sidestep floating-point rounding errors",{"key":163,"text":232},"The cart keeps too little in state; every value it displays should also be stored explicitly",{"key":166,"text":234},"State must never hold numbers, only the raw items, so `totalPrice` is simply the wrong type","A value that can be computed from existing state (total = sum of item prices) should be derived on render, not stored, because a second stored copy has to be kept consistent by hand and eventually drifts — exactly what happened here. Option (c) is the opposite lesson: storing more derived values multiplies the sync problem instead of solving it.",{"fields":237,"seniorities":410,"interview_shapes":411,"locales":416,"oauth":418,"question_count":421,"coach_enabled":422,"jd_match_enabled":422},[238,263,271,287,311,324,343,362,384,391,397,404],{"key":239,"name_tr":240,"name_en":240,"sort":153,"specializations":241},"backend","Backend",[242,245,248,251,254,257,260],{"key":243,"name":244,"field":239},"general","Genel",{"key":246,"name":247,"field":239},"go","Go",{"key":249,"name":250,"field":239},"python","Python",{"key":252,"name":253,"field":239},"java","Java",{"key":255,"name":256,"field":239},"csharp","C#\u002F.NET",{"key":258,"name":259,"field":239},"nodejs","Node.js",{"key":261,"name":262,"field":239},"php","PHP",{"key":5,"name_tr":6,"name_en":6,"sort":171,"specializations":264},[265,266,267,268,269,270],{"key":243,"name":244,"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":272,"name_tr":273,"name_en":273,"sort":224,"specializations":274},"fullstack","Fullstack",[275,276,277,278,279,280,281,282,283,284,285,286],{"key":243,"name":244,"field":272},{"key":246,"name":247,"field":239},{"key":249,"name":250,"field":239},{"key":252,"name":253,"field":239},{"key":255,"name":256,"field":239},{"key":258,"name":259,"field":239},{"key":261,"name":262,"field":239},{"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":243,"name":244,"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":243,"name":244,"field":312},{"key":249,"name":250,"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":243,"name":244,"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":243,"name":244,"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":243,"name":244,"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":243,"name":244,"field":385},{"key":392,"name_tr":393,"name_en":393,"sort":394,"specializations":395},"data-engineer","Data Engineer",10,[396],{"key":243,"name":244,"field":392},{"key":398,"name_tr":399,"name_en":400,"sort":401,"specializations":402},"game-dev","Oyun Geliştirme","Game Development",11,[403],{"key":243,"name":244,"field":398},{"key":405,"name_tr":406,"name_en":406,"sort":407,"specializations":408},"ml-engineer","ML Engineer",12,[409],{"key":243,"name":244,"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},[417,10],"tr",[419,420],"google","github",21750,true]