System Design bank React System Design / 30 questions Your progress 0 / 30 done Saved in this browser. Reset All 30 Medium 15 Hard 15 Hide done No questions match those filters. 01 Explain React's overall architecture: reconciler, renderer, and scheduler. Medium 02 Design the component architecture for a large-scale design system used across 20 product teams. Hard 03 Explain the React Fiber architecture and why it replaced the old stack reconciler. Medium 04 Walk through how Fiber enables interruptible rendering - what data structure powers it? Hard 05 Explain how React's Scheduler prioritizes work using lanes. Medium 06 Debug a scenario where a low-priority update is starving high-priority user input updates. Hard 07 Explain Concurrent Rendering and how it differs from the legacy synchronous rendering mode. Medium 08 Design a UI that uses useTransition to keep a search input responsive while filtering 10,000 items. Hard 09 Explain how Suspense works for data fetching versus code splitting. Medium 10 Design a Suspense-based loading strategy for a page with three independent, differently-latent data sources. Hard 11 Explain how Error Boundaries work and their limitations (e.g., event handlers, async code). Medium 12 Design an error boundary strategy for a dashboard with multiple independent widgets so one failure doesn't crash the page. Hard 13 Explain how React hooks maintain state between renders internally (the linked-list model). Medium 14 Why must hooks be called in the same order every render? Explain with an internals-level answer. Hard 15 Explain React's reconciliation algorithm and the role of keys in list rendering. Medium 16 Debug a performance issue caused by using array index as key in a reorderable list. Hard 17 Walk through the full rendering lifecycle from state update to committed DOM change. Medium 18 Explain the difference between the render phase and commit phase, and why render must be pure. Hard 19 When should state live in a component versus be lifted versus go into a global store? Medium 20 Design the state architecture for a multi-step checkout form with client and server validation. Hard 21 Explain how React.memo works and when it can make performance worse. Medium 22 Debug a component tree where React.memo isn't preventing re-renders as expected. Hard 23 Explain when useMemo actually improves performance versus adding overhead. Medium 24 Design a memoization strategy for an expensive derived data table with 50k rows. Hard 25 Explain how useCallback interacts with React.memo and when it's necessary. Medium 26 Debug a case where useCallback is used everywhere but the app is still slow - what's the likely mistake? Hard 27 Explain what the React Compiler (React Forget) automates and how it changes the need for manual memoization. Medium 28 What tradeoffs should a team weigh before adopting the React Compiler in a large legacy codebase? Hard 29 Explain how Server Components serialize data to the client and the constraints this places on props. Medium 30 Design a data-fetching strategy using Server Components that avoids waterfalls across nested components. Hard ← Previous Rendering Next → Next.js