[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:en:frontend\u002Freact-effects-lifecycle":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-effects-lifecycle","React Effects Lifecycle","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,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":73,"name":74,"count":11},"react-context-state","React Context State",{"key":8,"name":9,"count":11},{"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,182,195,209,222],{"id":152,"topic":9,"difficulty":153,"body":154,"options":155,"correct_key":160,"explanation":168},"019f5be4-0aa7-745b-ace3-d786704fbf8a",1,"In React, when does the function you pass to `useEffect` actually run, relative to the component's render?",[156,159,162,165],{"key":157,"text":158},"a","Synchronously during the render, before JSX is returned",{"key":160,"text":161},"b","After React commits the render to the screen",{"key":163,"text":164},"c","Only when a parent component re-renders",{"key":166,"text":167},"d","Before the render function runs","`useEffect` schedules its callback to run after the browser has painted the committed render — it is for work that reacts to a finished render (subscriptions, fetching, syncing with something outside React), not for computing what to render. Option (a) describes render-time logic, not an effect. Option (c) is wrong because a component's own render also schedules its own effects. Option (d) reverses the order entirely.",{"id":170,"topic":9,"difficulty":153,"body":171,"options":172,"correct_key":163,"explanation":181},"019f5be4-0aa7-7d5a-827d-a85f691f00c0","`useEffect(fn)`, `useEffect(fn, [])` and `useEffect(fn, [a, b])` all take the same `fn` but behave differently. What is the correct summary?",[173,175,177,179],{"key":157,"text":174},"All three run only once, right after mount",{"key":160,"text":176},"The array only affects cleanup timing, not whether the effect re-runs",{"key":163,"text":178},"No array: every render; `[]`: only after mount; `[a, b]`: when a or b change",{"key":166,"text":180},"`[a, b]` re-runs on every render where a or b exist","The dependency array is what React compares between renders to decide whether to re-run the effect: omitted → always re-run, `[]` → compare against nothing, so it only runs after mount, `[a, b]` → re-run only when at least one listed value differs from the previous render. Cleanup timing follows the same schedule as the effect itself, so (b) is wrong, and (d) confuses 'the values exist' with 'the values changed'.",{"id":183,"topic":9,"difficulty":153,"body":184,"options":185,"correct_key":166,"explanation":194},"019f5be4-0aa8-7593-8765-8d773d8e053c","```jsx\nfunction Ticker() {\n  const [n, setN] = useState(0);\n\n  useEffect(() => {\n    console.log('effect ran');\n  });\n\n  return \u003Cbutton onClick={() => setN(n + 1)}>{n}\u003C\u002Fbutton>;\n}\n```\nThe button is clicked 3 times after the initial mount. How many times does `'effect ran'` get logged in total?",[186,188,190,192],{"key":157,"text":187},"1 — array-less effects default to mount-only",{"key":160,"text":189},"2 — one for mount, one for all clicks batched together",{"key":163,"text":191},"3 — once per click, mount doesn't count",{"key":166,"text":193},"4 — once after mount, once after each of the 3 re-renders","Passing no dependency array at all means 'no comparison to skip anything', so the effect re-runs after every commit — the initial mount plus each of the 3 subsequent re-renders, giving 4 total. Option (a) inverts the actual rule (no array is the most frequent case, not the least). Option (c) wrongly excludes the mount, which is itself a commit.",{"id":196,"topic":9,"difficulty":197,"body":198,"options":199,"correct_key":157,"explanation":208},"019f5be4-0aa8-7f2b-8eed-03f721086721",2,"```jsx\nfunction Panel({ title }) {\n  useEffect(() => {\n    console.log('mounted with title:', title);\n  }, []);\n\n  return \u003Ch2>{title}\u003C\u002Fh2>;\n}\n```\nThe parent re-renders `Panel` three more times, each time passing a different `title` prop. What gets logged?",[200,202,204,206],{"key":157,"text":201},"Only one line, logged once after the first mount, with the first `title` value",{"key":160,"text":203},"Four lines, one for mount and one for each of the three prop changes",{"key":163,"text":205},"Three lines, one per prop change; mount is skipped",{"key":166,"text":207},"Zero lines, `[]` disables the effect entirely","An empty dependency array means React compares against 'nothing changed' on every subsequent render, so the effect body — including whatever value of `title` was captured in that first render's closure — only ever runs once, right after mount. Later prop changes do not trigger it again, so the logged `title` stays frozen at its initial value. Option (d) confuses 'runs once' with 'never runs'.",{"id":210,"topic":9,"difficulty":197,"body":211,"options":212,"correct_key":163,"explanation":221},"019f5be4-0aa9-7821-8d3e-7974d68abe2b","```jsx\nfunction Profile({ userId }) {\n  const [tab, setTab] = useState('posts');\n\n  useEffect(() => {\n    console.log('fetching user', userId);\n  }, [userId]);\n\n  return (\n    \u003Cbutton onClick={() => setTab(tab === 'posts' ? 'about' : 'posts')}>\n      {tab}\n    \u003C\u002Fbutton>\n  );\n}\n```\nThe user clicks the button 5 times (only `tab` changes, `userId` stays the same prop value throughout). How many times is `'fetching user'` logged during those 5 clicks?",[213,215,217,219],{"key":157,"text":214},"5 times, any state or prop update reruns every effect",{"key":160,"text":216},"0 times, effects with non-empty deps never fire again after mount",{"key":163,"text":218},"0 times, `userId` never changes across those clicks",{"key":166,"text":220},"1 time, all 5 clicks batched into one effect run","React only re-runs an effect when a value in its own dependency array differs from the previous render; `tab` isn't listed, so changes to `tab` are irrelevant to this particular effect even though they do cause re-renders. Since `userId` never changes, the effect simply doesn't re-run — not because it's disabled (b is wrong) and not because of batching (d misapplies a concept that applies to state updates, not effect scheduling).",{"id":223,"topic":9,"difficulty":197,"body":224,"options":225,"correct_key":160,"explanation":234},"019f5be4-0aaa-7267-a3cc-cbd0e29cb849","```jsx\nfunction Room({ roomId }) {\n  useEffect(() => {\n    console.log('connect to', roomId);\n    return () => console.log('disconnect from', roomId);\n  }, [roomId]);\n\n  return null;\n}\n```\n`roomId` goes from `'a'` to `'b'` (a re-render), and later the component unmounts. In what order do the four console lines appear?",[226,228,230,232],{"key":157,"text":227},"connect a, connect b, disconnect a, disconnect b",{"key":160,"text":229},"connect a, disconnect a, connect b, disconnect b",{"key":163,"text":231},"connect a, connect b, disconnect b, disconnect a",{"key":166,"text":233},"disconnect a, connect a, disconnect b, connect b","Before React runs an effect again for a changed dependency, it first invokes the cleanup returned by the *previous* run — so the sequence for a changing dependency is always connect-old, cleanup-old, connect-new, and eventually cleanup-new at unmount. That gives connect a, disconnect a, connect b, disconnect b, matching (b).",{"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":197,"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]