Q1: How do you prevent unnecessary re-renders in React?
I prevent unnecessary re-renders by controlling state granularity, memoizing components using React.memo, stabilizing function references with useCallback, memoizing expensive computations with useMemo, and avoiding inline object/array creation inside JSX.
Q2: How do you optimize large lists?
For large lists, I use virtualization to render only visible items instead of the entire dataset.
We can use react-window, react-virtualized, Pagination, Infinite scrolling, Memoized row components.
Q3: How do you handle slow APIs?
“I improve UX by implementing skeleton loaders, optimistic UI updates, request caching, request cancellation using AbortController, and background refetching.”
Q4: How do you reduce bundle size?
Code splitting (React.lazy, dynamic import)
- Tree shaking
- Remove unused libraries
- Analyze bundle using Webpack Bundle Analyzer
- Lazy load routes
- “I split vendor and application chunks to optimize caching.”
Q5: How does React reconciliation affect performance?
React uses a diffing algorithm to compare virtual DOM trees and updates only the changed elements. However, if component re-renders are triggered unnecessarily, reconciliation still runs, which impacts performance.
Q6: How do you optimize context performance?
I avoid putting frequently changing values inside Context because it re-renders all consumers. Instead, I split contexts or use state management like Redux for better granularity.
Q7: When NOT to use useMemo/useCallback?
I avoid premature optimization. Memoization has its own cost. I only use it when there’s a measurable performance issue.
Top comments (0)