State/props changes triggering excessive updates: Components re-render when their state or props change, even if the changes don’t affect the UI.
Parent component re-renders causing child re-renders: A parent re-rendering forces all children to re-render by default.
Lifting state too high: Placing state too far up the component tree causes unnecessary re-renders in unrelated children.
Frequent state updates: Rapid state changes (e.g., in animations or real-time data) can overload React’s reconciliation process.
Deeply nested components: Excessive nesting slows down reconciliation.
Rendering large lists without virtualization: Rendering hundreds or thousands of items at once (e.g., tables, grids) causes DOM overload.
Not memoizing expensive computations: Recalculating derived data on every render.
Not memoizing callbacks: Inline functions in props cause child components to re-render unnecessarily.
Expensive calculations in render: Running heavy computations during rendering.
Misusing useEffect: Overusing or improperly managing dependencies can lead to infinite loops or redundant updates.
Excessive dependencies: Large libraries (e.g., Moment.js) bloat bundle size.
No code-splitting: Loading the entire app at once instead of lazy-loading components.
Not using key properly: Missing or non-unique key props in lists force full DOM reconciliation.
No windowing/virtualization: Rendering all list items instead of only visible ones (use libraries like react-window or react-virtualized).
Frequent context updates: Context changes re-render all consuming components, even if they don’t use the changed value.
Combining unrelated state in a single context: Causes unnecessary re-renders when only one part of the state updates.
Using heavy UI libraries: Some component libraries (e.g., older versions of Material-UI) add significant overhead.
Non-optimized data-fetching libraries: GraphQL or REST clients that don’t support deduplication or caching.
Frequent re-renders on keystrokes: Uncontrolled inputs with state updates on every change (e.g., search bars without debouncing).
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
