React & JavaScript Mock Interview (SDE III Level)
This document is designed for senior-level frontend interviews focused on React and JavaScript, aligned
with expectations for an SDE III role. Use it for revision, mock interviews, and confident answer structuring.
1. React Architecture & Scalability
Question
How would you design a scalable React dashboard that shows real-time status of thousands of devices?
Ideal Answer
• Split UI into container (logic) and presentational (UI) components
• Use virtualized lists for large datasets
• Normalize data by deviceId
• Keep WebSocket logic outside React components
• Use memoization to reduce unnecessary re-renders
Focus on minimizing render scope and isolating frequent updates.
2. State Management Decisions
Question
When would you avoid Redux?
Ideal Answer
Avoid Redux when state is: - Local to a component - Short-lived (forms, modals) - Not shared widely
Prefer: - useState for simple state - useReducer for complex local logic - Context only for low-
frequency updates
Use Redux/Zustand when multiple distant components depend on shared, frequently updated data.
3. Performance Optimization
Question
A React page becomes slow when rendering a large list. How do you debug and fix it?
1
Ideal Answer
Steps: 1. Use React DevTools Profiler 2. Apply list virtualization 3. Memoize components ( [Link] ) 4.
Memoize handlers ( useCallback ) 5. Memoize heavy computations ( useMemo ) 6. Ensure stable and
correct key props
Optimize based on profiling, not assumptions.
4. React Hooks – Deep Understanding
Question
Explain useEffect , useLayoutEffect , and useMemo .
Ideal Answer
• useEffect : side effects like API calls, subscriptions
• useLayoutEffect : DOM measurements before paint
• useMemo : cache expensive computations
Avoid useLayoutEffect unless layout flicker must be prevented.
5. useEffect Dependency Pitfalls
Question
What happens if dependencies are missed in useEffect ?
Ideal Answer
• Causes stale closures
• Leads to subtle bugs
• Results in incorrect state usage
Use ESLint exhaustive-deps and functional updates when required.
6. Controlled vs Uncontrolled Components
Question
When would you use uncontrolled components?
2
Ideal Answer
• File uploads
• Large forms where performance matters
• Third-party integrations
They reduce unnecessary re-renders.
7. JavaScript Closures
Question
What is a closure? Give a real-world example.
Ideal Answer
A closure allows a function to access variables from its lexical scope even after the outer function has
executed.
Used in: - Event handlers - Custom hooks - useEffect callbacks
Closures explain why hook dependency arrays are critical.
8. JavaScript Event Loop
Question
What is the output of the following code?
[Link]("A");
setTimeout(() => [Link]("B"), 0);
[Link]().then(() => [Link]("C"));
[Link]("D");
Ideal Answer
Output:
3
A
D
C
B
Explanation: - Synchronous code runs first - Microtasks (Promises) - Macrotasks ( setTimeout )
9. Debounce vs Throttle
Question
What is the difference between debounce and throttle?
Ideal Answer
• Debounce: executes after user stops triggering (search input)
• Throttle: limits execution rate (scroll, resize)
10. Immutability in React
Question
Why is immutability important?
Ideal Answer
React relies on reference comparison. Mutating state prevents React from detecting changes and causes
missed renders.
Use: - Spread operators - Immutable updates - Functional state updates
11. API Handling (Production Ready)
Question
How do you handle API calls in React?
Ideal Answer
• Loading state
• Error state
4
• Retry logic
• Cancel requests on unmount (AbortController)
Prevents memory leaks and improves UX.
12. Security Awareness
Question
How do you prevent XSS in React?
Ideal Answer
• Avoid dangerouslySetInnerHTML
• Sanitize user input
• Trust React’s escaping
• Validate backend responses
13. Code Reviews
Question
What do you look for in a React PR?
Ideal Answer
• Clear separation of concerns
• Performance impact
• Edge cases
• Reusability
• Test coverage
• Readability
Bonus: Real-Time Updates
Question
How would you integrate WebSockets without hurting performance?
Ideal Answer
• Keep WebSocket logic outside components
• Subscribe/unsubscribe via effects
5
• Batch updates
• Avoid updating the entire state tree
Interviewer Evaluation Focus
• System thinking
• Scalability mindset
• Production experience
• Decision justification
Use this document for mock interviews, rapid revision, and confidence building.