Explain React classes, lifecycle, and hooks

In a frontend interview, explain several core React concepts: 1. Compare class components and function components in terms of syntax, state management, lifecycle handling, code reuse, and current best practices. 2. Describe the main lifecycle phases of class components: mounting, updating, and unmounting. Name representative lifecycle methods for each phase. 3. Explain how Hooks in function components address the same needs, especially `useState` and `useEffect`. 4. Discuss the Rules of Hooks and common pitfalls such as stale closures, incorrect dependency arrays, and unnecessary re-renders. Use concrete examples and explain when a modern React codebase should prefer one approach over the other.