[{"data":1,"prerenderedAt":247},["ShallowReactive",2],{"roadmap-react":3},{"framework":4,"title":7,"description":8,"model":9},{"slug":5,"name":6},"react","React","React Learning Roadmap","A guided path through React for technical interviews — work through each topic from fundamentals to advanced.",{"stages":10,"topicCount":244,"subtopicCount":245,"questionCount":246},[11,87,140,191],{"name":12,"summary":13,"topics":14,"gaps":85,"questionCount":86},"Getting Started","",[15,57],{"slug":16,"name":17,"description":18,"subtopics":19,"questionCount":56},"hooks","Hooks","useState, useEffect and the rules of hooks — the foundation of modern function-component React.",[20,26,32,37,41,47,51],{"path":21,"subtopic":22,"difficulty":23,"questionCount":24,"blogPath":25},"\u002Freact\u002Fhooks\u002Fusestate","useState","easy",34,"\u002Fblog\u002Freact-usestate-hook-complete-guide",{"path":27,"subtopic":28,"difficulty":29,"questionCount":30,"blogPath":31},"\u002Freact\u002Fhooks\u002Fuseeffect","useEffect","medium",35,"\u002Fblog\u002Freact-useeffect-hook-complete-guide",{"path":33,"subtopic":34,"difficulty":29,"questionCount":35,"blogPath":36},"\u002Freact\u002Fhooks\u002Fusecontext","useContext",16,"\u002Fblog\u002Freact-usecontext-hook-guide",{"path":38,"subtopic":39,"difficulty":29,"questionCount":35,"blogPath":40},"\u002Freact\u002Fhooks\u002Fusereducer","useReducer","\u002Fblog\u002Freact-usereducer-hook-guide",{"path":42,"subtopic":43,"difficulty":44,"questionCount":45,"blogPath":46},"\u002Freact\u002Fhooks\u002Fusecallback-usememo","useCallback & useMemo","hard",15,"\u002Fblog\u002Freact-usecallback-usememo-guide",{"path":48,"subtopic":49,"difficulty":29,"questionCount":45,"blogPath":50},"\u002Freact\u002Fhooks\u002Fuseref","useRef","\u002Fblog\u002Freact-useref-hook-guide",{"path":52,"subtopic":53,"difficulty":29,"questionCount":54,"blogPath":55},"\u002Freact\u002Fhooks\u002Fcustom-hooks","Custom Hooks",14,"\u002Fblog\u002Freact-custom-hooks-guide",145,{"slug":58,"name":59,"description":60,"subtopics":61,"questionCount":84},"components","Components","JSX syntax, props, event handling, conditional rendering, and lists — the building blocks of every React UI.",[62,66,70,75,79],{"path":63,"subtopic":64,"difficulty":23,"questionCount":35,"blogPath":65},"\u002Freact\u002Fcomponents\u002Fjsx-rendering","JSX and Rendering","\u002Fblog\u002Freact-jsx-rendering-guide",{"path":67,"subtopic":68,"difficulty":23,"questionCount":35,"blogPath":69},"\u002Freact\u002Fcomponents\u002Fprops-component-types","Props and Component Types","\u002Fblog\u002Freact-props-component-types-guide",{"path":71,"subtopic":72,"difficulty":23,"questionCount":73,"blogPath":74},"\u002Freact\u002Fcomponents\u002Fevent-handling","Event Handling",17,"\u002Fblog\u002Freact-event-handling-guide",{"path":76,"subtopic":77,"difficulty":23,"questionCount":45,"blogPath":78},"\u002Freact\u002Fcomponents\u002Fconditional-rendering","Conditional Rendering","\u002Fblog\u002Freact-conditional-rendering-guide",{"path":80,"subtopic":81,"difficulty":23,"questionCount":82,"blogPath":83},"\u002Freact\u002Fcomponents\u002Flists-keys","Lists and Keys",18,"\u002Fblog\u002Freact-lists-keys-guide",82,[],227,{"name":88,"summary":13,"topics":89,"gaps":138,"questionCount":139},"Building Core Skills",[90,112],{"slug":91,"name":92,"description":93,"subtopics":94,"questionCount":111},"state-and-data-flow","State and Data Flow","Lifting state, the Context API, controlled vs. uncontrolled components, and solutions to prop drilling — how data moves through a React application.",[95,99,103,107],{"path":96,"subtopic":97,"difficulty":23,"questionCount":35,"blogPath":98},"\u002Freact\u002Fstate-and-data-flow\u002Flifting-state","Lifting State Up","\u002Fblog\u002Freact-lifting-state-guide",{"path":100,"subtopic":101,"difficulty":29,"questionCount":45,"blogPath":102},"\u002Freact\u002Fstate-and-data-flow\u002Fcontext-api","Context API","\u002Fblog\u002Freact-context-api-guide",{"path":104,"subtopic":105,"difficulty":29,"questionCount":54,"blogPath":106},"\u002Freact\u002Fstate-and-data-flow\u002Fcontrolled-vs-uncontrolled","Controlled vs Uncontrolled Components","\u002Fblog\u002Freact-controlled-vs-uncontrolled-guide",{"path":108,"subtopic":109,"difficulty":29,"questionCount":54,"blogPath":110},"\u002Freact\u002Fstate-and-data-flow\u002Fprop-drilling-composition","Prop Drilling and Composition","\u002Fblog\u002Freact-prop-drilling-composition-guide",59,{"slug":113,"name":114,"description":115,"subtopics":116,"questionCount":137},"rendering-and-performance","Rendering and Performance","Virtual DOM, reconciliation, React.memo, useMemo\u002FuseCallback patterns, code splitting with lazy\u002FSuspense, and concurrent rendering — how React decides what to paint and how to keep it fast.",[117,121,125,129,133],{"path":118,"subtopic":119,"difficulty":29,"questionCount":45,"blogPath":120},"\u002Freact\u002Frendering-and-performance\u002Fvirtual-dom-reconciliation","Virtual DOM and Reconciliation","\u002Fblog\u002Freact-virtual-dom-reconciliation-guide",{"path":122,"subtopic":123,"difficulty":29,"questionCount":54,"blogPath":124},"\u002Freact\u002Frendering-and-performance\u002Freact-memo","React.memo","\u002Fblog\u002Freact-memo-guide",{"path":126,"subtopic":127,"difficulty":29,"questionCount":45,"blogPath":128},"\u002Freact\u002Frendering-and-performance\u002Fusememo-usecallback-patterns","useMemo and useCallback Patterns","\u002Fblog\u002Freact-usememo-usecallback-patterns-guide",{"path":130,"subtopic":131,"difficulty":29,"questionCount":45,"blogPath":132},"\u002Freact\u002Frendering-and-performance\u002Fcode-splitting-lazy","Code Splitting and Lazy Loading","\u002Fblog\u002Freact-code-splitting-lazy-guide",{"path":134,"subtopic":135,"difficulty":44,"questionCount":45,"blogPath":136},"\u002Freact\u002Frendering-and-performance\u002Fsuspense-concurrent","Suspense and Concurrent Rendering","\u002Fblog\u002Freact-suspense-concurrent-guide",74,[],133,{"name":141,"summary":13,"topics":142,"gaps":189,"questionCount":190},"Going Deeper",[143,166],{"slug":144,"name":145,"description":146,"subtopics":147,"questionCount":165},"routing","Routing","React Router v6 fundamentals, dynamic and nested routes, navigation hooks (useNavigate, useParams, useLocation), and protecting routes with auth guards.",[148,153,157,161],{"path":149,"subtopic":150,"difficulty":23,"questionCount":151,"blogPath":152},"\u002Freact\u002Frouting\u002Frouting-basics","Routing Basics",20,"\u002Fblog\u002Freact-routing-basics-guide",{"path":154,"subtopic":155,"difficulty":29,"questionCount":151,"blogPath":156},"\u002Freact\u002Frouting\u002Fdynamic-nested-routes","Dynamic and Nested Routes","\u002Fblog\u002Freact-dynamic-nested-routes-guide",{"path":158,"subtopic":159,"difficulty":29,"questionCount":151,"blogPath":160},"\u002Freact\u002Frouting\u002Fnavigation-hooks","Navigation Hooks","\u002Fblog\u002Freact-navigation-hooks-guide",{"path":162,"subtopic":163,"difficulty":29,"questionCount":151,"blogPath":164},"\u002Freact\u002Frouting\u002Fprotected-routes","Protected Routes","\u002Fblog\u002Freact-protected-routes-guide",80,{"slug":167,"name":168,"description":169,"subtopics":170,"questionCount":188},"state-management","State Management","Redux Toolkit, Zustand, Context vs Redux trade-offs, and async state management with React Query — patterns for managing global and server state in production React apps.",[171,176,180,184],{"path":172,"subtopic":173,"difficulty":29,"questionCount":174,"blogPath":175},"\u002Freact\u002Fstate-management\u002Fredux-toolkit","Redux Toolkit",19,"\u002Fblog\u002Freact-redux-toolkit-guide",{"path":177,"subtopic":178,"difficulty":29,"questionCount":82,"blogPath":179},"\u002Freact\u002Fstate-management\u002Fzustand","Zustand","\u002Fblog\u002Freact-zustand-guide",{"path":181,"subtopic":182,"difficulty":29,"questionCount":82,"blogPath":183},"\u002Freact\u002Fstate-management\u002Fcontext-vs-redux","Context vs Redux","\u002Fblog\u002Freact-context-vs-redux-guide",{"path":185,"subtopic":186,"difficulty":29,"questionCount":151,"blogPath":187},"\u002Freact\u002Fstate-management\u002Fasync-state-react-query","Async State & React Query","\u002Fblog\u002Freact-async-state-react-query-guide",75,[],155,{"name":192,"summary":13,"topics":193,"gaps":243,"questionCount":190},"Advanced Topics",[194,220],{"slug":195,"name":196,"description":197,"subtopics":198,"questionCount":219},"patterns","Patterns","Compound components, render props, HOCs, error boundaries, portals, refs, forwardRef, and useImperativeHandle — React advanced composition patterns for building flexible, reusable, and production-grade component APIs.",[199,203,207,211,215],{"path":200,"subtopic":201,"difficulty":29,"questionCount":174,"blogPath":202},"\u002Freact\u002Fpatterns\u002Fcompound-components","Compound Components","\u002Fblog\u002Freact-compound-components-guide",{"path":204,"subtopic":205,"difficulty":29,"questionCount":174,"blogPath":206},"\u002Freact\u002Fpatterns\u002Frender-props-hoc","Render Props & HOCs","\u002Fblog\u002Freact-render-props-hoc-guide",{"path":208,"subtopic":209,"difficulty":29,"questionCount":151,"blogPath":210},"\u002Freact\u002Fpatterns\u002Ferror-boundaries","Error Boundaries","\u002Fblog\u002Freact-error-boundaries-guide",{"path":212,"subtopic":213,"difficulty":29,"questionCount":151,"blogPath":214},"\u002Freact\u002Fpatterns\u002Fportals-refs","Portals & Refs","\u002Fblog\u002Freact-portals-refs-guide",{"path":216,"subtopic":217,"difficulty":44,"questionCount":151,"blogPath":218},"\u002Freact\u002Fpatterns\u002Fforward-ref-imperative","forwardRef & useImperativeHandle","\u002Fblog\u002Freact-forward-ref-imperative-guide",98,{"slug":221,"name":222,"description":223,"subtopics":224,"questionCount":242},"testing","Testing","React Testing Library, component interaction testing, mocking async operations, and testing custom hooks — everything you need to write confident, maintainable tests for React applications.",[225,229,233,238],{"path":226,"subtopic":227,"difficulty":29,"questionCount":35,"blogPath":228},"\u002Freact\u002Ftesting\u002Frtl-basics","RTL Basics","\u002Fblog\u002Freact-rtl-basics-guide",{"path":230,"subtopic":231,"difficulty":29,"questionCount":45,"blogPath":232},"\u002Freact\u002Ftesting\u002Fcomponent-interaction-testing","Component Interaction Testing","\u002Fblog\u002Freact-component-interaction-testing-guide",{"path":234,"subtopic":235,"difficulty":44,"questionCount":236,"blogPath":237},"\u002Freact\u002Ftesting\u002Fmocking-async","Mocking Async",13,"\u002Fblog\u002Freact-mocking-async-guide",{"path":239,"subtopic":240,"difficulty":44,"questionCount":236,"blogPath":241},"\u002Freact\u002Ftesting\u002Ftesting-custom-hooks","Testing Custom Hooks","\u002Fblog\u002Freact-testing-custom-hooks-guide",57,[],8,38,670,1782244083099]