[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:en:frontend\u002Frendering-reactivity":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","","rendering-reactivity","Rendering Reactivity","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,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":82,"name":83,"count":11},"react-hooks-state","React Hooks State",{"key":85,"name":86,"count":11},"react-rendering-performance","React Rendering Performance",{"key":8,"name":9,"count":11},{"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,182,196,209,222],{"id":152,"topic":9,"difficulty":153,"body":154,"options":155,"correct_key":163,"explanation":168},"019f56bb-ba8d-7256-868f-e807a3b03814",1,"In UI development, what is a *component*?",[156,159,162,165],{"key":157,"text":158},"a","A CSS stylesheet that controls the colors and spacing across every page of the app",{"key":160,"text":161},"b","A global function that runs exactly once when the whole application starts up",{"key":163,"text":164},"c","A reusable, self-contained piece of UI that can be combined to build a screen",{"key":166,"text":167},"d","A database table that holds the rows a particular screen needs to display","A component packages markup, and often its own logic and styling, into a named unit you can reuse and nest — the basic building block of a UI. Option (a) confuses a component with styling, and (d) confuses it with the data layer; a component may *use* data but is not where it is stored.",{"id":170,"topic":9,"difficulty":153,"body":171,"options":172,"correct_key":157,"explanation":181},"019f56bb-ba8d-79a7-bcf2-58ce6a503554","What best describes a *declarative* approach to building UI?",[173,175,177,179],{"key":157,"text":174},"You describe what the UI should look like for a given state, and the system updates the DOM to match",{"key":160,"text":176},"You write step-by-step DOM instructions that the browser records and automatically replays later",{"key":163,"text":178},"You style the UI entirely with CSS and deliberately avoid writing any JavaScript at all",{"key":166,"text":180},"You manually read and then update each individual DOM node yourself every time the underlying data changes","Declarative UI means you express the target state (\"here is what it should look like now\") and let the framework or your render function reconcile the actual DOM. Option (d) is the imperative style — the opposite — where you hand-write each DOM mutation; (b) is not a real model of how declarative rendering works.",{"id":183,"topic":9,"difficulty":184,"body":185,"options":186,"correct_key":166,"explanation":195},"019f56bb-ba8d-7f3f-a11a-978b34febf75",2,"You build a `Toggle` component. The text label shown on it is supplied by whichever screen uses the toggle, while whether it is currently on or off is tracked by the toggle itself. How are these two pieces of data classified?",[187,189,191,193],{"key":157,"text":188},"Both the label and the on\u002Foff value are state, because the component is the thing that displays both of them",{"key":160,"text":190},"The label is state and the on\u002Foff value is a prop passed down from the parent",{"key":163,"text":192},"Both are props, because a component never owns any of the data it renders",{"key":166,"text":194},"The label is a prop passed in from outside, and the on\u002Foff value is the component's own state","Props are inputs handed to a component from outside and owned by the parent; state is data the component creates and controls over its own lifetime. The label comes from the parent (a prop), while the on\u002Foff status is internal, so it is state. Option (c) is wrong because components very often own local state.",{"id":197,"topic":9,"difficulty":184,"body":198,"options":199,"correct_key":160,"explanation":208},"019f56bb-ba8e-76a9-93b4-98080ae3701e","A parent passes a list of items down to a child, and the child needs to remove one of them. In a one-way (unidirectional) data flow, how should the removal happen?",[200,202,204,206],{"key":157,"text":201},"The child deletes the item straight from the array it received, since it already holds a reference to it",{"key":160,"text":203},"The child notifies the parent, and the parent updates the list, which then flows back down to the child",{"key":163,"text":205},"The child keeps its own private copy of the list and edits that, ignoring the parent's version entirely",{"key":166,"text":207},"The child reaches into the parent and reassigns the parent's list variable directly","Unidirectional flow means data moves down through props and changes travel back up through events\u002Fcallbacks; the owner of the data (the parent) is the only place that mutates it. Option (a) mutates data the child does not own and breaks the single source of truth, and (c) creates two diverging copies of the same list.",{"id":210,"topic":9,"difficulty":153,"body":211,"options":212,"correct_key":166,"explanation":221},"019f56bb-ba8e-7e06-bf34-d765b4e4a81f","Modern UI is often summarized by the idea 'UI is a function of state'. What does this mean?",[213,215,217,219],{"key":157,"text":214},"The UI can only be written inside functions, never using classes or objects",{"key":160,"text":216},"Every function in the app must return a piece of the user interface",{"key":163,"text":218},"The application keeps exactly one function whose only responsibility is to fetch the state from the server",{"key":166,"text":220},"For a given state, the rendered UI is determined by that state — the same state produces the same UI","The slogan means the view is derived from state: describe how state maps to output, and the same state always yields the same view. It is not a claim about avoiding classes (a) or about every function returning UI (b); those confuse the metaphor with a literal coding rule.",{"id":223,"topic":9,"difficulty":184,"body":224,"options":225,"correct_key":163,"explanation":234},"019f56bb-ba8f-7516-9da7-6b99d258a770","```\nlet count = 0\n\nfunction render() {\n  screen.innerHTML = `\u003Cp>Count: ${count}\u003C\u002Fp>`\n}\n\nfunction increment() {\n  count = count + 1\n}\n```\n`render()` is called once at startup. You then call `increment()` several times, but the screen still shows `Count: 0`. Why?",[226,228,230,232],{"key":157,"text":227},"`count` is a local variable, so `increment()` ends up updating a different copy than the one `render()` reads",{"key":160,"text":229},"`innerHTML` caches its first value and refuses to change after the initial assignment",{"key":163,"text":231},"Nothing re-runs `render()` after the data changes, so the displayed text is never regenerated",{"key":166,"text":233},"Template strings are evaluated only once, so `${count}` is frozen at its first value","In plain imperative code, updating the data does nothing to the DOM on its own — you must call `render()` again to reflect the new value. This is exactly the gap reactivity closes: a reactive system re-runs rendering for you when the data it depends on changes. `innerHTML` (b) and template strings (d) are re-evaluated fine every time `render()` runs.",{"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":184,"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},[417,10],"tr",[419,420],"google","github",21750,true]