React Rendering Performance Fix

My React app has rendering performance issues. Help me fix them.

**Symptoms:** [DESCRIBE — e.g., "list feels janky when scrolling", "typing in search field is laggy", "entire page re-renders on every state change"]

**Component code:**
```
[PASTE_PROBLEMATIC_COMPONENT_AND_PARENT]
```

Analyze and fix:
1. **Identify unnecessary re-renders** — which components re-render when they shouldn't
2. **Fix with the right tool:**
   - React.memo() — when and where (not everywhere)
   - useMemo() — for expensive computations
   - useCallback() — for callback props passed to memoized children
   - Key prop optimization — proper key usage in lists
3. **State management fixes:**
   - Move state closer to where it's used
   - Split large context into focused contexts
   - Use state selectors if using a store
4. **Virtualization** — if rendering long lists, add react-window or virtualization
5. **Event handling** — debounce/throttle expensive handlers

For each fix:
- Show the before and after code
- Explain which renders it eliminates
- Note any trade-offs (memory vs speed)

Reminder: don't prematurely optimize. Only suggest changes that address the actual symptoms described.