[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:tr: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","tr",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,"React'in zihinsel modelinde, bir component'in \"render olması\" ile gerçek DOM'un güncellenmesi arasındaki ilişki nedir?",[156,159,162,165],{"key":157,"text":158},"a","Render olmak ile DOM'u güncellemek aynı adımdır; render fonksiyonunu çağırmak doğrudan sayfaya yazar",{"key":160,"text":161},"b","Render olmak bellekte UI'ın yeni bir tarifini üretir; React bunu DOM'a dokunmadan önce bir öncekiyle karşılaştırır",{"key":163,"text":164},"c","Render yalnızca bir component'in ömründe bir kez olur, sonraki tüm güncellemeler karşılaştırmasız doğrudan DOM'a gider",{"key":166,"text":167},"d","Önce DOM güncellenir, render fonksiyonu ise sonucu state'e geri okumak için sonradan çalışır","Bir component fonksiyonunu çağırmak (\"render olmak\") yalnızca UI'ın nasıl görünmesi gerektiğini tarif eden bir React element ağacı döndürür. React bu yeni ağacı bir öncekiyle uzlaştırır (reconcile eder) ve gerçek DOM'a yalnızca gerekli değişiklikleri uygular. Render olmak DOM yazımını garanti etmez; üretilen tarif önceki ile aynıysa sayfada hiçbir şey değişmez.",{"id":170,"topic":9,"difficulty":171,"body":172,"options":173,"correct_key":157,"explanation":182},"019f5be4-0ae8-7741-a44f-6fc86423329f",2,"`Parent`, state'inde bir sayaç tutuyor ve her saniye yeniden render oluyor. `\u003CChild label=\"static\" \u002F>` render ediyor; `label` hiç değişmiyor ve `Child` sade bir fonksiyon component (`React.memo` YOK). `Parent` her yeniden render olduğunda `Child`'a ne olur?",[174,176,178,180],{"key":157,"text":175},"Kendi prop değeri hiç değişmese bile, `Parent` her yeniden render olduğunda `Child` da yeniden render olur",{"key":160,"text":177},"Prop değeri değişmediği için `Child` ilk mount'tan sonra bir daha hiç render olmaz",{"key":163,"text":179},"`Child` yalnızca her saniyelik tik'te, `Parent`'ın çıktısı aynı göründüğü tik'leri atlayarak render olur",{"key":166,"text":181},"`Child` yalnızca kendi içinde de bir `useState` veya `useEffect` hook'u tanımlarsa render olur","`React.memo` olmadan bir child, kendisine geçilen prop'lar değişsin ya da değişmesin, parent'ı her yeniden render olduğunda tekrar render olur. React bir alt ağacı yalnızca `memo` ile sarılmışsa (ya da o component'in kendi state'inde Object.is kontrolüyle bir bailout uygulanıyorsa) atlar. Sade bir component'te böyle bir çıkış yolu yoktur, bu yüzden parent'ıyla birlikte her seferinde yeniden çalışır.",{"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}>git\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)}>tik\u003C\u002Fbutton>\n      \u003CRow onClick={logClick} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\"tik\" butonuna tekrar tekrar tıklamak `Parent`'ı yeniden render ediyor. İlk mount'tan sonra `\"Row rendered\"` kaç kez loglanır?",[187,189,191,193],{"key":157,"text":188},"Her tıklamada bir kez, çünkü `Parent`'ın kendi yeniden render olması `Row`'u da her seferinde çalıştırmaya zorlar",{"key":160,"text":190},"İlk iki tıklamada loglanır, sonrasında React `Row`'u çağırmayı bırakır",{"key":163,"text":192},"İlk mount'tan sonra bir daha hiç loglamaz",{"key":166,"text":194},"Bir tıklama loglanır bir tıklama loglanmaz, `Row`'u çalıştırmak ile atlamak sırayla değişir","`logClick`, `Parent`'ın dışında yalnızca bir kez tanımlanıyor, bu yüzden `Row`'a her render'da tam olarak aynı fonksiyon referansı geçiliyor. `React.memo` prop'ların sığ karşılaştırmasını yapar ve `onClick` render'lar arasında `Object.is` ile eşit olduğundan (başka prop da olmadığından) `Row` bailout yapar ve yeniden render olmaz — her tıklamada yalnızca `Parent` yeniden render olur.",{"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}>git\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)}>tik\u003C\u002Fbutton>\n      \u003CRow onClick={() => console.log('clicked')} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\nBu, öncekiyle aynı; tek fark `onClick={() => console.log('clicked')}` ifadesinin `Parent`'ın JSX'i içinde inline yazılmış olması. `Row`'un memoization'ı için ne değişir?",[200,202,204,206],{"key":157,"text":201},"Hiçbir şey değişmez; `React.memo` fonksiyonun davranışını karşılaştırır, referansını değil, bu yüzden `Row` yine render'ı atlar",{"key":160,"text":203},"`Row` her tıklamada yeniden render olur, çünkü her render'da yeni bir arrow function oluşur ve `onClick` referansı hep farklıdır",{"key":163,"text":205},"`Row` yalnızca ilk tıklamada yeniden render olur, sonra React inline fonksiyonu sonsuza dek önbelleğe alır",{"key":166,"text":207},"Inline fonksiyon prop'u aldığında `React.memo` uyarı fırlatır ve `Row`'u render etmeyi reddeder","Inline bir arrow function ifadesi, `Parent`'ın her render'ında yepyeni bir fonksiyon nesnesi oluşturur. `React.memo`'nun sığ prop karşılaştırması referans eşitliği kullanır ve kodu aynı olsa bile iki farklı fonksiyon nesnesi asla eşit sayılmaz. Bu yüzden `onClick` prop'u her render'da \"değişmiş\" kabul edilir ve `Row` her seferinde yeniden render olur — `memo`'nun sessizce etkisiz kaldığı klasik durum budur.",{"id":210,"topic":9,"difficulty":171,"body":211,"options":212,"correct_key":166,"explanation":221},"019f5be4-0aea-73a5-a45f-2cd42cd38b5e","Önceki örneğe devam edelim (inline `onClick`, `Row`'un memoization'ını etkisiz kılıyordu): hâlâ bir click handler'ı prop olarak geçerken, render atlama davranışını geri getiren `Parent` değişikliği hangisidir?",[213,215,217,219],{"key":157,"text":214},"`Row`'dan `React.memo`'yu tamamen kaldırıp tekrar eden log mesajını React'in kendisinin fark etmesine güvenmek",{"key":160,"text":216},"`console.log('clicked')` çağrısını `Row`'un içine taşımak, böylece `Parent`'ın fonksiyon geçmesine gerek kalmasın",{"key":163,"text":218},"Arrow function'ı, JSX içinde her seferinde yeni oluşturulan bağlı (bound) bir metotla değiştirmek, örn. `onClick={handleClick.bind(null)}`",{"key":166,"text":220},"Handler'ı `useCallback(() => console.log('clicked'), [])` ile sarmalayıp bu sabit referansı `onClick` olarak geçirmek","Boş bağımlılık dizisiyle `useCallback`, listelenen bir bağımlılık değişene kadar render'lar arasında tam olarak aynı fonksiyon referansını döndürür. Bu sabit referansı `onClick` olarak geçmek, prop'un her `Parent` render'ında `Object.is` ile eşit olması demektir; böylece `React.memo`'nun sığ karşılaştırması bir değişiklik görmez ve `Row` yeniden render'ı yine atlar.",{"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```\nTema butonuna tıklamak `Report`'u yeniden render ediyor ama `rows` ve `filterText` değişmiyor. Bu yeniden render'da `useMemo` ne yapar?",[226,228,230,232],{"key":157,"text":227},"İki bağımlılık da değişmediği için `rows.filter(...)`'ı tekrar çalıştırmadan önbelleğe alınmış `filtered` dizisini döner",{"key":160,"text":229},"Bağımlılık dizisinden bağımsız olarak `Report` her yeniden render olduğunda `rows.filter(...)`'ı yeniden çalıştırır",{"key":163,"text":231},"`theme` hesaplamayla ilgisiz olsa bile bağımlılık dizisinde listelenmediği için hata fırlatır",{"key":166,"text":233},"`rows` veya `filterText` değişene kadar `\u003Cul>`'un render edilmesini tamamen atlar","`useMemo`, fonksiyonunu yalnızca bağımlılık dizisindeki bir değer (bir önceki render'a göre Object.is ile karşılaştırılarak) değiştiğinde yeniden çalıştırır. Burada `rows` ve `filterText` değişmediği için React filtrelemeyi tekrar çalıştırmayı atlar ve bir önceki render'dan gelen önbelleğe alınmış diziyi doğrudan döner — ilgisiz bir `theme` state'i değişti diye yeniden filtreleme maliyetinden kaçınılır.",{"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},[10,417],"en",[419,420],"google","github",21750,true]