Interview Prep
ReactJS
250 questions across 18 categories
50 of 50 questions
| # | Category | Question | Answer | ★ |
|---|---|---|---|---|
| 1 | Core Concepts | How does React's reconciliation algorithm (diffing) work? What are the heuristics it uses to stay O(n)? | Click row to expand | |
| 2 | Core Concepts | What is the React Fiber architecture? How does it enable concurrent rendering? | Click row to expand | |
| 3 | Core Concepts | What is the difference between controlled and uncontrolled components? When do you choose each? | Click row to expand | |
| 4 | Hooks | Explain the rules of Hooks. Why do they exist and what happens if you break them? | Click row to expand | |
| 5 | Hooks | Explain useEffect in depth. When does it run, what are the dependency array rules, and what are common pitfalls? | Click row to expand | |
| 6 | Hooks | What is the difference between useState and useReducer? When should you prefer useReducer? | Click row to expand | |
| 7 | Hooks | How do useMemo and useCallback work? When do they help performance and when are they premature optimization? | Click row to expand | |
| 8 | Hooks | Explain useRef. What are its two use cases and how does it differ from useState? | Click row to expand | |
| 9 | Hooks | What is useContext? What are its performance implications and when should you use Zustand or Redux instead? | Click row to expand | |
| 10 | Hooks | How do you implement custom hooks? What patterns make them composable and testable? | Click row to expand | |
| 11 | State Management | Explain React 18's concurrent features: useTransition, useDeferredValue, and Suspense for data fetching. | Click row to expand | |
| 12 | Performance | What is React.memo? How does it work and what are the pitfalls that prevent it from working? | Click row to expand | |
| 13 | Performance | How do you optimize large list rendering in React? Compare windowing approaches. | Click row to expand | |
| 14 | Performance | What is code splitting in React? Explain lazy loading, Suspense, and route-based splitting. | Click row to expand | |
| 15 | Performance | What is React Server Components (RSC)? How do they differ from client components and SSR? | Click row to expand | |
| 16 | State Management | Explain the Flux architecture pattern and how Redux implements it. What problems does it solve? | Click row to expand | |
| 17 | State Management | Compare Zustand, Jotai, and Recoil for React state management. What are the philosophical differences? | Click row to expand | |
| 18 | Patterns | What are React design patterns? Explain render props, higher-order components (HOCs), and when to replace them with hooks. | Click row to expand | |
| 19 | Patterns | Explain error boundaries in React. How do you implement one and what errors can't they catch? | Click row to expand | |
| 20 | Performance | What is hydration and what is partial or selective hydration? What causes hydration mismatches? | Click row to expand | |
| 21 | Testing | What is React Testing Library's philosophy? How does it differ from Enzyme? Explain the core queries and events. | Click row to expand | |
| 22 | Testing | How do you test a component with API calls? Compare mocking strategies. | Click row to expand | |
| 23 | Patterns | What is the compound component pattern in React? Implement a type-safe Tabs component using this pattern. | Click row to expand | |
| 24 | Core Concepts | Explain React's batching behavior. How does automatic batching in React 18 change things? | Click row to expand | |
| 25 | Core Concepts | What is the difference between createRef and useRef? When should you use forwardRef and useImperativeHandle? | Click row to expand | |
| 26 | Hooks | What is useLayoutEffect? How does it differ from useEffect and when should you use it? | Click row to expand | |
| 27 | State Management | How does TanStack Query (React Query) work? Explain caching, stale time, and background refetching. | Click row to expand | |
| 28 | Patterns | What is the Provider pattern in React? How do you structure multiple providers without 'Provider hell'? | Click row to expand | |
| 29 | Core Concepts | How does React's rendering pipeline work? Explain the difference between rendering and committing. | Click row to expand | |
| 30 | Testing | What is Storybook and how does it complement React Testing Library? What types of tests does each address? | Click row to expand | |
| 31 | Performance | How do you measure React application performance? What are the key metrics and tools? | Click row to expand | |
| 32 | Patterns | What is the Container/Presenter pattern and when is it still relevant with hooks? | Click row to expand | |
| 33 | Core Concepts | How does Strict Mode work in React 18? What behaviors does it enable and what bugs does it surface? | Click row to expand | |
| 34 | Performance | What is the difference between SSR, SSG, ISR, and CSR in Next.js? When do you choose each? | Click row to expand | |
| 35 | Hooks | What is useId (React 18)? What problem does it solve for SSR accessibility? | Click row to expand | |
| 36 | Testing | How do you write integration tests in React that span multiple components? What is the integration test pyramid? | Click row to expand | |
| 37 | Core Concepts | What are portals in React? When would you use them and what are the event propagation rules? | Click row to expand | |
| 38 | State Management | How do you manage form state in React at scale? Compare React Hook Form, Formik, and controlled state. | Click row to expand | |
| 39 | Patterns | What is the observer pattern in React? How does React 18's useSyncExternalStore enable safe external store subscriptions? | Click row to expand | |
| 40 | Core Concepts | What are React actions and the new form patterns in React 19? How does useActionState work? | Click row to expand | |
| 41 | Hooks | How does useCallback cause performance bugs? Explain the stale closure problem in event handlers. | Click row to expand | |
| 42 | Core Concepts | What is React's key prop? What happens when you use index as key vs stable data-based key? | Click row to expand | |
| 43 | Patterns | What is accessibility (a11y) in React? What are the key practices for building accessible components? | Click row to expand | |
| 44 | Testing | How do you test custom hooks with complex async behavior and side effects? | Click row to expand | |
| 45 | Performance | What is the Offscreen component (React 18 experimental)? How does it relate to keep-alive patterns? | Click row to expand | |
| 46 | State Management | How do you implement optimistic UI updates in React? What are the rollback patterns? | Click row to expand | |
| 47 | Core Concepts | What is React.lazy and Suspense? How do you handle errors in lazy-loaded components? | Click row to expand | |
| 48 | Patterns | What is the headless component pattern? Compare with Headless UI, Radix UI, and React Aria. | Click row to expand | |
| 49 | Core Concepts | What is the difference between React.cloneElement and React.Children API? When are they appropriate? | Click row to expand | |
| 50 | Performance | What is React Compiler (React Forget)? How does it change memoization best practices? | Click row to expand |