[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:en:frontend\u002Freact-rendering-performance":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-rendering-performance","React Rendering Performance","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,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":82,"name":83,"count":11},"react-hooks-state","React Hooks State",{"key":8,"name":9,"count":11},{"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,183,196,209,222],{"id":152,"topic":9,"difficulty":153,"body":154,"options":155,"correct_key":160,"explanation":168},"019f5be4-0ae7-7db9-b258-ec8c51ae0ce7",1,"In React's mental model, what is the relationship between a component \"rendering\" and the actual DOM being updated?",[156,159,162,165],{"key":157,"text":158},"a","Rendering and updating the DOM are the same step; calling a render function writes directly to the page",{"key":160,"text":161},"b","Rendering produces a new UI description in memory, which React diffs against the previous one before touching the DOM",{"key":163,"text":164},"c","Rendering only happens once per component ever, and all later updates go straight to the DOM without comparison",{"key":166,"text":167},"d","The DOM is updated first, and the render function runs afterward to read the result back into state","Calling a component function (\"rendering\") just returns a tree of React elements — a description of what the UI should look like. React then reconciles this new tree against the previous one and applies only the necessary mutations to the real DOM. A render does not guarantee a DOM write; if the resulting description is unchanged, nothing is touched on the page.",{"id":170,"topic":9,"difficulty":171,"body":172,"options":173,"correct_key":157,"explanation":182},"019f5be4-0ae8-7741-a44f-6fc86423329f",2,"`Parent` holds a counter in state and re-renders every second. It renders `\u003CChild label=\"static\" \u002F>` where `label` never changes and `Child` is a plain function component (no `React.memo`). What happens to `Child` on each `Parent` re-render?",[174,176,178,180],{"key":157,"text":175},"`Child` re-renders every time `Parent` re-renders, even though its own prop value never changed",{"key":160,"text":177},"`Child` never re-renders again after the first mount, because its prop value is unchanged",{"key":163,"text":179},"`Child` re-renders only on every second tick, skipping the ticks where `Parent`'s render output looks identical",{"key":166,"text":181},"`Child` re-renders only if it also declares its own `useState` or `useEffect` hook internally","Without `React.memo`, a child re-renders whenever its parent re-renders, regardless of whether the props passed to it changed. React only skips re-rendering a subtree when that subtree is wrapped in `memo` (or when a bailout like `useState`'s Object.is check applies to that component's own state). A plain component has no such opt-out, so it always re-executes along with its parent.",{"id":184,"topic":9,"difficulty":171,"body":185,"options":186,"correct_key":163,"explanation":195},"019f5be4-0ae9-7344-a10d-742abb16f0d4","```jsx\nconst logClick = () => console.log('clicked');\n\nconst Row = React.memo(function Row({ onClick }) {\n  console.log('Row rendered');\n  return \u003Cbutton onClick={onClick}>go\u003C\u002Fbutton>;\n});\n\nfunction Parent() {\n  const [tick, setTick] = React.useState(0);\n  return (\n    \u003Cdiv>\n      {tick}\n      \u003Cbutton onClick={() => setTick(t => t + 1)}>tick\u003C\u002Fbutton>\n      \u003CRow onClick={logClick} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\nClicking \"tick\" repeatedly re-renders `Parent`. How many times does `\"Row rendered\"` log after the initial mount?",[187,189,191,193],{"key":157,"text":188},"Once per click, because `Parent`'s own re-render always forces `Row` to run again too",{"key":160,"text":190},"It logs on the first two clicks and then React stops calling `Row` after that",{"key":163,"text":192},"It never logs again after the initial mount",{"key":166,"text":194},"It logs on every other click, alternating between running and skipping `Row`","`logClick` is declared once outside `Parent`, so the exact same function reference is passed to `Row` on every render. `React.memo` does a shallow comparison of props, and since `onClick` is `Object.is`-equal across renders (and there are no other props), `Row` bails out and does not re-render — only `Parent` re-renders on each click.",{"id":197,"topic":9,"difficulty":171,"body":198,"options":199,"correct_key":160,"explanation":208},"019f5be4-0ae9-7af4-89fa-1ab833a22d96","```jsx\nconst Row = React.memo(function Row({ onClick }) {\n  console.log('Row rendered');\n  return \u003Cbutton onClick={onClick}>go\u003C\u002Fbutton>;\n});\n\nfunction Parent() {\n  const [tick, setTick] = React.useState(0);\n  return (\n    \u003Cdiv>\n      {tick}\n      \u003Cbutton onClick={() => setTick(t => t + 1)}>tick\u003C\u002Fbutton>\n      \u003CRow onClick={() => console.log('clicked')} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\nThis is the same as before, except `onClick={() => console.log('clicked')}` is written inline inside `Parent`'s JSX. What changes about `Row`'s memoization?",[200,202,204,206],{"key":157,"text":201},"Nothing changes; `React.memo` compares function behavior, not identity, so `Row` still skips re-rendering",{"key":160,"text":203},"`Row` re-renders on every click, since a new arrow function each render means the `onClick` reference always differs",{"key":163,"text":205},"`Row` re-renders only on the first click and then React caches the inline function forever",{"key":166,"text":207},"`React.memo` throws a warning and refuses to render `Row` when it receives an inline function prop","An inline arrow function literal creates a brand-new function object on every render of `Parent`. `React.memo`'s shallow prop comparison uses reference equality, and two different function objects are never equal even if their code is identical. So the `onClick` prop is considered \"changed\" on every render, and `Row` re-renders every time — this is the classic way `memo` gets silently defeated.",{"id":210,"topic":9,"difficulty":171,"body":211,"options":212,"correct_key":166,"explanation":221},"019f5be4-0aea-73a5-a45f-2cd42cd38b5e","Building on the previous example (inline `onClick` defeats `Row`'s memoization), which change to `Parent` restores the skip-re-render behavior while still passing a click handler as a prop?",[213,215,217,219],{"key":157,"text":214},"Remove `React.memo` from `Row` entirely and rely on React to detect the repeated log message",{"key":160,"text":216},"Move the `console.log('clicked')` call inside `Row` itself so `Parent` no longer needs to pass a function",{"key":163,"text":218},"Replace the arrow function with a bound method created fresh in the JSX, e.g. `onClick={handleClick.bind(null)}`",{"key":166,"text":220},"Wrap the handler in `useCallback(() => console.log('clicked'), [])` and pass that stable reference as `onClick`","`useCallback` with an empty dependency array returns the exact same function reference across renders (until a listed dependency changes). Passing that stable reference as `onClick` means the prop is `Object.is`-equal on every `Parent` render, so `React.memo`'s shallow comparison sees no change and `Row` skips re-rendering again.",{"id":223,"topic":9,"difficulty":171,"body":224,"options":225,"correct_key":157,"explanation":234},"019f5be4-0aea-79a2-9722-7eb01cae3a54","```jsx\nfunction Report({ rows, filterText }) {\n  const filtered = React.useMemo(\n    () => rows.filter(r => r.name.includes(filterText)),\n    [rows, filterText]\n  );\n  const [theme, setTheme] = React.useState('light');\n  return (\n    \u003Cdiv>\n      \u003Cbutton onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>{theme}\u003C\u002Fbutton>\n      \u003Cul>{filtered.map(r => \u003Cli key={r.id}>{r.name}\u003C\u002Fli>)}\u003C\u002Ful>\n    \u003C\u002Fdiv>\n  );\n}\n```\nClicking the theme button re-renders `Report`, but `rows` and `filterText` do not change. What does `useMemo` do on that re-render?",[226,228,230,232],{"key":157,"text":227},"It returns the previously cached `filtered` array without re-running `rows.filter(...)`, since neither dependency changed",{"key":160,"text":229},"It re-runs `rows.filter(...)` every time `Report` re-renders, regardless of the dependency array",{"key":163,"text":231},"It throws an error because `theme` is not listed in the dependency array even though it's unrelated to the computation",{"key":166,"text":233},"It skips rendering the `\u003Cul>` entirely until `rows` or `filterText` changes","`useMemo` re-runs its function only when a value in the dependency array changes (compared with Object.is against the previous render). Here `rows` and `filterText` are unchanged, so React skips re-running the filter and simply returns the memoized array from the previous render — avoiding the cost of re-filtering just because an unrelated `theme` state changed.",{"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":171,"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]