5 React Performance Mistakes That Are Slowing Your App Down

= useMemo(() => { return ${firstName} ${lastName} }, [firstName, lastName])

**When it actually makes sense:**  

const sortedList = useMemo(() => { return items.sort((a, b) => b.score - a.score) }, [items])

### 3. One giant component doing everything
Split your components into two types:
**Container components** handle the logic. They manage state, make API calls, and pass data down as props. They do not render complex UI.
**Presentational components** are pure display. They receive props and render. Because they have no local state, they only re-render when their props actually change, and wrapping them in `React.memo` becomes straightforward and effective. This pattern also makes testing much easier as a side benefit.

// Container function UserProfileContainer() { const { data, isLoading } = useUserProfile() if (isLoading) return <Spinner /> return <UserProfileCard user={data} /> }

// Presentational const UserProfileCard = React.memo(function UserProfileCard({ user }) { return ( <div> <h2>{user.name}</h2> <p>{user.email}</p> </div> ) })

### 4. Storing derived state in useState
If a value can be computed from props or from state you already have, it does not need its own `useState`. Storing it separately means you have two sources of truth for the same piece of data, and keeping them in sync requires extra code that is easy to get wrong. Computing during render is simpler, always in sync, and renders once instead of twice.

**The bad pattern:**  

const [firstName, setFirstName] = useState('') const [lastName, setLastName] = useState('') const [fullName, setFullName] = useState('')

useEffect(() => { setFullName(${firstName} ${lastName}) }, [firstName, lastName])

**The fix:**  

const [firstName, setFirstName] = useState('') const [lastName, setLastName] = useState('')

const fullName = ${firstName} ${lastName}

### 5. Using array index as a list key
React uses keys to track which items in a list have changed between renders. When you use the array index as the key, React cannot tell the difference between an item that moved and an item that changed. This leads to wrong state being mapped to the wrong component, animation bugs, and slower reconciliation. Always use a stable, unique identifier. If your data does not have IDs, generate them when the data is created, not at render time.

**The bad pattern:**  

items.map((item, index) => ( <TodoItem key={index} item={item} /> ))

**The fix:**  

items.map((item) => ( <TodoItem key={item.id} item={item} /> ))

## Pitfall Guide
1. **Inline Object/Function Creation in JSX**: Creating new references on every render breaks shallow comparison in child components, forcing unnecessary re-renders. **Best Practice:** Extract static objects to module scope and wrap state-dependent handlers in `useCallback` only when passed to `React.memo`-wrapped children.
2. **Blind Memoization with useMemo/useCallback**: Applying memoization universally introduces dependency tracking and comparison overhead that often exceeds the cost of the original computation. **Best Practice:** Use the React DevTools Profiler to identify actual bottlenecks. Memoize only expensive calculations or stable references required by memoized children.
3. **Monolithic Component Architecture**: Bundling data fetching, state management, and UI rendering in a single component forces full-tree re-renders on minor state changes. **Best Practice:** Decouple logic and presentation. Use container components for state/API orchestration and presentational components for pure UI rendering, enabling targeted `React.memo` optimization.
4. **Derived State Stored in useState**: Synchronizing computed values with `useEffect` creates dual sources of truth and triggers double-render cycles. **Best Practice:** Compute derived values directly during the render phase. This guarantees consistency, eliminates extra render passes, and simplifies state management.
5. **Array Index as List Key**: Using indices breaks React's reconciliation algorithm when lists are reordered, filtered, or mutated, causing state leakage and DOM thrashing. **Best Practice:** Assign stable, unique identifiers at data creation time. Never generate keys during render or rely on positional indices for dynamic lists.

## Deliverables
**📦 React Performance Optimization Blueprint**
A structured implementation guide covering component architecture decoupling, memoization decision trees, and reconciliation-safe list rendering. Includes architectural diagrams for container/presentational splits and reference extraction patterns.

**✅ Pre-Commit Performance Checklist**
- [ ] Extract static objects/functions outside component scope
- [ ] Verify `useCallback`/`useMemo` usage is backed by profiler data
- [ ] Confirm monolithic components are split into container/presentational pairs
- [ ] Validate derived state is computed during render, not stored in `useState`
- [ ] Audit all `.map()` calls for stable unique keys (no array indices)
- [ ] Run React DevTools Profiler to confirm reduced re-render counts
- [ ] Document memoization boundaries and dependency arrays in code comments

**🔧 Configuration Templates**
- ESLint rules for detecting inline JSX object/function creation
- React.memo wrapper patterns for presentational components
- Stable ID generation utility for API responses lacking unique identifiers