React Debugging and Performance Assessment

Background

You're reviewing a React single-page application during a technical phone screen. The codebase exhibits bugs and performance issues, but no specific files are provided here. You should outline how you would systematically detect and fix the following problems, describing the tools, signals, and code patterns you would look for.

Tasks

1. Unnecessary Re-renders
   • Explain how you would detect components that render more often than needed.
   • Identify common causes and show how to prevent them.
2. Event-Binding Leaks
   • Describe how you would find and fix memory/performance leaks caused by event listeners (DOM, window, subscriptions, timers).
3. Misaligned Rendering
   • Define and diagnose "misaligned rendering" (visual layout shifts or UI not matching state due to keys, layout thrashing, etc.).
   • Propose fixes.
4. Bonus: Optimize a Severely Laggy Component
   • Provide a step-by-step plan to diagnose and optimize a component that feels very slow (e.g., a large list or a heavy computation during typing).

Assume React 18 and a modern browser environment. Include specific tools (e.g., React DevTools Profiler) and minimal code examples where helpful.