What are the most common causes of performance issues in React applications?
- 1
State/props changes triggering excessive updates: Components re-render when their state or props change, even if the changes don’t affect the UI.
- 2
Parent component re-renders causing child re-renders: A parent re-rendering forces all children to re-render by default.
- 3
Lifting state too high: Placing state too far up the component tree causes unnecessary re-renders in unrelated children.
- 4
Frequent state updates: Rapid state changes (e.g., in animations or real-time data) can overload React’s reconciliation process.
- 5
Deeply nested components: Excessive nesting slows down reconciliation.
- 6
Rendering large lists without virtualization: Rendering hundreds or thousands of items at once (e.g., tables, grids) causes DOM overload.
- 7
Not memoizing expensive computations: Recalculating derived data on every render.
- 8
Not memoizing callbacks: Inline functions in props cause child components to re-render unnecessarily.
- 9
Expensive calculations in render: Running heavy computations during rendering.
- 10
Misusing useEffect: Overusing or improperly managing dependencies can lead to infinite loops or redundant updates.
- 11
Excessive dependencies: Large libraries (e.g., Moment.js) bloat bundle size.
- 12
No code-splitting: Loading the entire app at once instead of lazy-loading components.
- 13
Not using key properly: Missing or non-unique key props in lists force full DOM reconciliation.
- 14
No windowing/virtualization: Rendering all list items instead of only visible ones (use libraries like react-window or react-virtualized).
- 15
Frequent context updates: Context changes re-render all consuming components, even if they don’t use the changed value.
- 16
Combining unrelated state in a single context: Causes unnecessary re-renders when only one part of the state updates.
- 17
Using heavy UI libraries: Some component libraries (e.g., older versions of Material-UI) add significant overhead.
- 18
Non-optimized data-fetching libraries: GraphQL or REST clients that don’t support deduplication or caching.
- 19
Frequent re-renders on keystrokes: Uncontrolled inputs with state updates on every change (e.g., search bars without debouncing).
Scenario Questions
0-2 years experience
- 1How would you identify if a component is causing unnecessary re‑renders in a small React app?
- 2What would happen if you forget to add a key prop to a list of items you render?
- 3If the UI feels sluggish after adding a new feature that fetches data, what simple steps would you take to investigate?
2-5 years experience
- 1You notice a page load time increase after introducing a new context provider. How would you debug the performance regression?
- 2Explain why using inline functions as props can degrade performance, and how you would refactor a component that passes an inline callback to many children.
- 3A teammate reports that a component re‑renders on every keystroke even though the state only changes in a sibling component. What could be causing this and how would you fix it?
5-8 years experience
- 1Design a strategy to reduce bundle size and improve initial render performance for a large React codebase that uses many third‑party UI libraries.
- 2How would you approach profiling and optimizing a complex data‑grid component that suffers from jank during scrolling?
- 3Discuss trade‑offs between using React.memo, useCallback, and moving logic to a Web Worker for a CPU‑intensive feature.
8+ years experience
- 1Your organization plans to migrate a legacy codebase to React 18 with concurrent features. What architectural considerations would you make to avoid performance pitfalls at scale?
- 2How would you set up organization‑wide performance monitoring and guidelines to ensure new components don’t introduce regressions across multiple teams?
- 3When evaluating whether to rewrite a performance‑critical module in a different framework or keep it in React, what factors would you weigh and how would you make the decision?
Follow-up Questions
- Can you walk me through how you'd use the React Profiler to pinpoint the issue?
- What impact does code‑splitting have on perceived performance versus runtime cost?
- How do you decide when to memoize a component versus refactoring its logic?