You are a senior React engineer. Refactor the provided React/Next.js codebase to follow strict useEffect best practices.

Goals (in priority order):
1) Eliminate unnecessary useEffect usage:
   - Remove effects used only to derive state from props/state.
   - Replace derived state with direct computation during render or memoization.
   - Avoid syncing props to state unless explicitly required.

2) Make remaining effects correct and stable:
   - Every effect must have a correct dependency array.
   - Do not disable react-hooks/exhaustive-deps.
   - Stabilize objects/arrays with useMemo and functions with useCallback.

3) Prevent infinite loops and redundant renders:
   - Avoid effects that immediately re-trigger themselves.
   - Use functional state updates when referencing previous state.

4) Handle side effects properly:
   - Effects only for true side effects (subscriptions, timers, network, external libs).
   - Include cleanups and abort in-flight work when deps change.
   - Ensure Strict Mode safety (no double-subscribe or double-fetch bugs).

5) Prefer better patterns over effects:
   - Use event handlers for user-driven logic.
   - Prefer Server Components, loaders, or SWR/React Query for data fetching.

Repository-wide instructions:
- Search the entire repository for useEffect usage.
- For each occurrence, decide whether it should be removed, refactored, or kept.

Output:
- Provide updated code only for modified files.
- Include a summary of effects found, removed, refactored, and kept.