[{"data":1,"prerenderedAt":851},["ShallowReactive",2],{"page-\u002Freact":3},{"id":4,"title":5,"body":6,"description":843,"extension":844,"meta":845,"navigation":846,"path":847,"seo":848,"stem":849,"__hash__":850},"content\u002Freact\u002Findex.md","Learn React — Engineering Reference",{"type":7,"value":8,"toc":822},"minimark",[9,14,23,28,56,60,88,92,97,198,202,318,322,409,413,469,473,539,543,613,617,621,635,639,651,655,661,665,668,672,723,727,808,812,815,818],[10,11,13],"h1",{"id":12},"️-learn-react-engineering-reference","⚛️ Learn React — Engineering Reference",[15,16,17,18,22],"p",{},"A code-first, production-grade React curriculum for mid-to-senior developers. Each chapter is structured around ",[19,20,21],"strong",{},"annotated code blocks"," — complex implementations, anti-patterns with fixes, performance tricks, and edge-case failure modes — rather than prose-heavy tutorials. Every concept is shown as it's used in real production systems, with dense inline comments explaining the underlying React mechanics.",[24,25,27],"h2",{"id":26},"how-to-use-this-reference","How to Use This Reference",[29,30,31,38,44,50],"ol",{},[32,33,34,37],"li",{},[19,35,36],{},"Read sequentially"," (01 → 26) for a structured path from JSX to production security.",[32,39,40,43],{},[19,41,42],{},"Jump to a chapter"," as a reference when you hit a specific React problem — each is self-contained.",[32,45,46,49],{},[19,47,48],{},"Build the projects"," in chapter 26 after every few chapters.",[32,51,52,55],{},[19,53,54],{},"Read the React source and popular library internals"," (TanStack Query, Zustand) alongside.",[24,57,59],{"id":58},"prerequisites","Prerequisites",[61,62,63,66,82,85],"ul",{},[32,64,65],{},"Modern JavaScript (ES2015+): arrow functions, destructuring, modules, promises\u002Fasync-await.",[32,67,68,69,73,74,77,78,81],{},"Node.js and a package manager (",[70,71,72],"code",{},"npm",", ",[70,75,76],{},"pnpm",", or ",[70,79,80],{},"yarn",").",[32,83,84],{},"A code editor (VS Code recommended).",[32,86,87],{},"Familiarity with at least one other UI framework or sufficient general web development experience — this reference moves fast on fundamentals.",[24,89,91],{"id":90},"curriculum","Curriculum",[93,94,96],"h3",{"id":95},"part-i-foundations","Part I — Foundations",[98,99,100,116],"table",{},[101,102,103],"thead",{},[104,105,106,110,113],"tr",{},[107,108,109],"th",{},"#",[107,111,112],{},"Topic",[107,114,115],{},"Why It Matters",[117,118,119,135,153,167,184],"tbody",{},[104,120,121,125,132],{},[122,123,124],"td",{},"01",[122,126,127],{},[128,129,131],"a",{"href":130},"\u002Freact\u002F01-introduction-and-setup","Introduction & Setup",[122,133,134],{},"Toolchain, project scaffolding, mental model.",[104,136,137,140,146],{},[122,138,139],{},"02",[122,141,142],{},[128,143,145],{"href":144},"\u002Freact\u002F02-jsx-deep-dive","JSX Deep Dive",[122,147,148,149,152],{},"Syntax, expressions, escaping, compilation to ",[70,150,151],{},"createElement",".",[104,154,155,158,164],{},[122,156,157],{},"03",[122,159,160],{},[128,161,163],{"href":162},"\u002Freact\u002F03-components-and-props","Components & Props",[122,165,166],{},"Composition unit, prop patterns, children.",[104,168,169,172,181],{},[122,170,171],{},"04",[122,173,174],{},[128,175,177,178],{"href":176},"\u002Freact\u002F04-state-and-usestate","State & ",[70,179,180],{},"useState",[122,182,183],{},"Local state, batching, functional updates.",[104,185,186,189,195],{},[122,187,188],{},"05",[122,190,191],{},[128,192,194],{"href":193},"\u002Freact\u002F05-event-handling","Event Handling",[122,196,197],{},"Synthetic events, delegation, handler patterns.",[93,199,201],{"id":200},"part-ii-hooks-side-effects","Part II — Hooks & Side Effects",[98,203,204,214],{},[101,205,206],{},[104,207,208,210,212],{},[107,209,109],{},[107,211,112],{},[107,213,115],{},[117,215,216,233,250,267,287,304],{},[104,217,218,221,230],{},[122,219,220],{},"06",[122,222,223],{},[128,224,226,229],{"href":225},"\u002Freact\u002F06-useeffect-and-lifecycle",[70,227,228],{},"useEffect"," & Lifecycle",[122,231,232],{},"Synchronization, cleanup, dependency arrays.",[104,234,235,238,247],{},[122,236,237],{},"07",[122,239,240],{},[128,241,243,246],{"href":242},"\u002Freact\u002F07-usecontext-and-prop-drilling",[70,244,245],{},"useContext"," & Prop Drilling",[122,248,249],{},"Sharing state without threading props.",[104,251,252,255,264],{},[122,253,254],{},"08",[122,256,257],{},[128,258,260,263],{"href":259},"\u002Freact\u002F08-useref-and-dom-access",[70,261,262],{},"useRef"," & DOM Access",[122,265,266],{},"Mutable values, imperative DOM access.",[104,268,269,272,284],{},[122,270,271],{},"09",[122,273,274],{},[128,275,277,280,281],{"href":276},"\u002Freact\u002F09-usememo-and-usecallback",[70,278,279],{},"useMemo"," & ",[70,282,283],{},"useCallback",[122,285,286],{},"Memoization, referential equality.",[104,288,289,292,301],{},[122,290,291],{},"10",[122,293,294],{},[128,295,297,300],{"href":296},"\u002Freact\u002F10-usereducer-and-complex-state",[70,298,299],{},"useReducer"," & Complex State",[122,302,303],{},"Action-based state transitions.",[104,305,306,309,315],{},[122,307,308],{},"11",[122,310,311],{},[128,312,314],{"href":313},"\u002Freact\u002F11-custom-hooks","Custom Hooks",[122,316,317],{},"Extracting and reusing stateful logic.",[93,319,321],{"id":320},"part-iii-rendering-patterns","Part III — Rendering Patterns",[98,323,324,334],{},[101,325,326],{},[104,327,328,330,332],{},[107,329,109],{},[107,331,112],{},[107,333,115],{},[117,335,336,353,367,381,395],{},[104,337,338,341,347],{},[122,339,340],{},"12",[122,342,343],{},[128,344,346],{"href":345},"\u002Freact\u002F12-conditional-rendering-patterns","Conditional Rendering Patterns",[122,348,349,352],{},[70,350,351],{},"&&",", ternaries, early returns, pitfalls.",[104,354,355,358,364],{},[122,356,357],{},"13",[122,359,360],{},[128,361,363],{"href":362},"\u002Freact\u002F13-lists-keys-and-reconciliation","Lists, Keys & Reconciliation",[122,365,366],{},"Diffing algorithm, key stability.",[104,368,369,372,378],{},[122,370,371],{},"14",[122,373,374],{},[128,375,377],{"href":376},"\u002Freact\u002F14-forms-controlled-and-uncontrolled","Forms: Controlled and Uncontrolled",[122,379,380],{},"Input state, validation, refs vs. state.",[104,382,383,386,392],{},[122,384,385],{},"15",[122,387,388],{},[128,389,391],{"href":390},"\u002Freact\u002F15-composition-vs-inheritance","Composition vs. Inheritance",[122,393,394],{},"Slots, render props, compound components.",[104,396,397,400,406],{},[122,398,399],{},"16",[122,401,402],{},[128,403,405],{"href":404},"\u002Freact\u002F16-error-boundaries","Error Boundaries",[122,407,408],{},"Catching render errors, fallback UI.",[93,410,412],{"id":411},"part-iv-data-state-at-scale","Part IV — Data & State at Scale",[98,414,415,425],{},[101,416,417],{},[104,418,419,421,423],{},[107,420,109],{},[107,422,112],{},[107,424,115],{},[117,426,427,441,455],{},[104,428,429,432,438],{},[122,430,431],{},"17",[122,433,434],{},[128,435,437],{"href":436},"\u002Freact\u002F17-fetching-data","Fetching Data",[122,439,440],{},"Effects, loading\u002Ferror states, aborting requests.",[104,442,443,446,452],{},[122,444,445],{},"18",[122,447,448],{},[128,449,451],{"href":450},"\u002Freact\u002F18-context-and-state-management-libraries","Context and State Management Libraries",[122,453,454],{},"Redux, Zustand, when Context isn't enough.",[104,456,457,460,466],{},[122,458,459],{},"19",[122,461,462],{},[128,463,465],{"href":464},"\u002Freact\u002F19-routing-react-router","Routing with React Router",[122,467,468],{},"Client-side navigation, dynamic routes.",[93,470,472],{"id":471},"part-v-performance-modern-react","Part V — Performance & Modern React",[98,474,475,485],{},[101,476,477],{},[104,478,479,481,483],{},[107,480,109],{},[107,482,112],{},[107,484,115],{},[117,486,487,505,525],{},[104,488,489,492,498],{},[122,490,491],{},"20",[122,493,494],{},[128,495,497],{"href":496},"\u002Freact\u002F20-performance-optimization","Performance Optimization",[122,499,500,501,504],{},"Profiling, ",[70,502,503],{},"memo",", virtualization.",[104,506,507,510,516],{},[122,508,509],{},"21",[122,511,512],{},[128,513,515],{"href":514},"\u002Freact\u002F21-concurrent-features","Concurrent Features",[122,517,518,73,521,524],{},[70,519,520],{},"useTransition",[70,522,523],{},"useDeferredValue",", Suspense.",[104,526,527,530,536],{},[122,528,529],{},"22",[122,531,532],{},[128,533,535],{"href":534},"\u002Freact\u002F22-server-components-and-ssr","Server Components and SSR",[122,537,538],{},"RSC, streaming, hydration.",[93,540,542],{"id":541},"part-vi-production-engineering","Part VI — Production Engineering",[98,544,545,555],{},[101,546,547],{},[104,548,549,551,553],{},[107,550,109],{},[107,552,112],{},[107,554,115],{},[117,556,557,571,585,599],{},[104,558,559,562,568],{},[122,560,561],{},"23",[122,563,564],{},[128,565,567],{"href":566},"\u002Freact\u002F23-typescript-with-react","TypeScript with React",[122,569,570],{},"Typed props, hooks, generics, event types.",[104,572,573,576,582],{},[122,574,575],{},"24",[122,577,578],{},[128,579,581],{"href":580},"\u002Freact\u002F24-testing","Testing",[122,583,584],{},"React Testing Library, mocking, interaction tests.",[104,586,587,590,596],{},[122,588,589],{},"25",[122,591,592],{},[128,593,595],{"href":594},"\u002Freact\u002F25-security","Security",[122,597,598],{},"XSS boundaries, dependency risk, secrets, CSP.",[104,600,601,604,610],{},[122,602,603],{},"26",[122,605,606],{},[128,607,609],{"href":608},"\u002Freact\u002F26-exercises-and-projects","Exercises & Project Ideas",[122,611,612],{},"From beginner to pro.",[24,614,616],{"id":615},"learning-path-suggestions","Learning Path Suggestions",[93,618,620],{"id":619},"if-youre-new-to-frontend-development","If you're new to frontend development",[29,622,623,626,629,632],{},[32,624,625],{},"Read 01–11 in order, slowly — hooks are the foundation everything else builds on.",[32,627,628],{},"Skim 12–16, then build Project 1 (Todo List) from chapter 26.",[32,630,631],{},"Read 17–19, then build Projects 2–4.",[32,633,634],{},"Come back for 20–25 once you have a few working apps under your belt.",[93,636,638],{"id":637},"if-youre-coming-from-another-framework-vue-angular-svelte","If you're coming from another framework (Vue, Angular, Svelte)",[15,640,641,642,644,645,647,648,650],{},"Read 02–05 quickly — concepts translate, only syntax and mental model differ. Slow down for 06 (",[70,643,228],{},") and 09 (",[70,646,279],{},"\u002F",[70,649,283],{},") — dependency arrays and referential equality are React-specific traps. Read 18 to compare React's state-management story with what you already know.",[93,652,654],{"id":653},"if-youre-coming-from-jquery-or-vanilla-js","If you're coming from jQuery or vanilla JS",[15,656,657,658,660],{},"Ownership of the DOM shifts entirely to React — read 02, 03, and 13 carefully before anything else. Resist the urge to reach for ",[70,659,262],{},"-driven manual DOM manipulation as a first instinct; read 04 and 14 until declarative state feels natural.",[93,662,664],{"id":663},"if-youre-a-senior-engineer-learning-react-for-production","If you're a senior engineer learning React for production",[15,666,667],{},"Skim 01–11. Read 17, 18, 20, 21, 22 closely. Use 23 and 25 as ongoing references. Then read 26 and build the intermediate and advanced projects.",[24,669,671],{"id":670},"companion-resources","Companion Resources",[61,673,674,683,691,699,707,715],{},[32,675,676,682],{},[128,677,681],{"href":678,"rel":679},"https:\u002F\u002Freact.dev\u002F",[680],"nofollow","React Documentation"," — official, free, and the best starting point.",[32,684,685,690],{},[128,686,689],{"href":687,"rel":688},"https:\u002F\u002Ftesting-library.com\u002Fdocs\u002Freact-testing-library\u002Fintro\u002F",[680],"React Testing Library Docs"," — testing philosophy and API.",[32,692,693,698],{},[128,694,697],{"href":695,"rel":696},"https:\u002F\u002Ftanstack.com\u002Fquery\u002Flatest",[680],"TanStack Query Docs"," — production-grade data fetching beyond chapter 17.",[32,700,701,706],{},[128,702,705],{"href":703,"rel":704},"https:\u002F\u002Fnextjs.org\u002Fdocs",[680],"Next.js Documentation"," — Server Components and SSR in practice.",[32,708,709,714],{},[128,710,713],{"href":711,"rel":712},"https:\u002F\u002Fepicreact.dev\u002F",[680],"Kent C. Dodds' Epic React"," — deep, exercise-driven React training.",[32,716,717,722],{},[128,718,721],{"href":719,"rel":720},"https:\u002F\u002Freddit.com\u002Fr\u002Freactjs",[680],"r\u002Freactjs"," — community.",[24,724,726],{"id":725},"tooling-to-install","Tooling to Install",[728,729,731],"code-wrapper",{"language":730},"bash",[732,733,737],"pre",{"className":734,"code":735,"language":730,"meta":736,"style":736},"language-bash shiki shiki-themes github-light github-dark","npm create vite@latest my-app -- --template react-ts\nnpm install -D eslint eslint-plugin-react-hooks prettier\nnpm install -D vitest @testing-library\u002Freact @testing-library\u002Fuser-event jsdom\n","",[70,738,739,767,787],{"__ignoreMap":736},[740,741,744,747,751,754,757,761,764],"span",{"class":742,"line":743},"line",1,[740,745,72],{"class":746},"sIsaT",[740,748,750],{"class":749},"sJ6F3"," create",[740,752,753],{"class":749}," vite@latest",[740,755,756],{"class":749}," my-app",[740,758,760],{"class":759},"snvgF"," --",[740,762,763],{"class":759}," --template",[740,765,766],{"class":749}," react-ts\n",[740,768,770,772,775,778,781,784],{"class":742,"line":769},2,[740,771,72],{"class":746},[740,773,774],{"class":749}," install",[740,776,777],{"class":759}," -D",[740,779,780],{"class":749}," eslint",[740,782,783],{"class":749}," eslint-plugin-react-hooks",[740,785,786],{"class":749}," prettier\n",[740,788,790,792,794,796,799,802,805],{"class":742,"line":789},3,[740,791,72],{"class":746},[740,793,774],{"class":749},[740,795,777],{"class":759},[740,797,798],{"class":749}," vitest",[740,800,801],{"class":749}," @testing-library\u002Freact",[740,803,804],{"class":749}," @testing-library\u002Fuser-event",[740,806,807],{"class":749}," jsdom\n",[24,809,811],{"id":810},"license","License",[15,813,814],{},"These notes are yours to use, share, and modify.",[15,816,817],{},"⚛️",[819,820,821],"style",{},"html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}",{"title":736,"searchDepth":769,"depth":769,"links":823},[824,825,826,834,840,841,842],{"id":26,"depth":769,"text":27},{"id":58,"depth":769,"text":59},{"id":90,"depth":769,"text":91,"children":827},[828,829,830,831,832,833],{"id":95,"depth":789,"text":96},{"id":200,"depth":789,"text":201},{"id":320,"depth":789,"text":321},{"id":411,"depth":789,"text":412},{"id":471,"depth":789,"text":472},{"id":541,"depth":789,"text":542},{"id":615,"depth":769,"text":616,"children":835},[836,837,838,839],{"id":619,"depth":789,"text":620},{"id":637,"depth":789,"text":638},{"id":653,"depth":789,"text":654},{"id":663,"depth":789,"text":664},{"id":670,"depth":769,"text":671},{"id":725,"depth":769,"text":726},{"id":810,"depth":769,"text":811},"A code-first, production-grade React curriculum for mid-to-senior engineers. 26 chapters covering JSX, hooks, state management, performance, concurrency, server components, TypeScript, testing, and security — through annotated code, anti-patterns, and edge cases.","md",{},true,"\u002Freact",{"title":5,"description":843},"react\u002Findex","YVNif4zY0WTeLX-Ujrxj5BHdsDhkS4a13yBHH9I8CGA",1789924652700]