In React, components can be written either as functional components (using functions) or class components (using ES6 classes). While both can render UI, they differ in syntax, lifecycle handling, and how they manage state.
| Feature | Functional Component 🧩 | Class Component 🏛️ |
|---|---|---|
| Syntax | Plain JavaScript function | ES6 class extending React.Component |
| State Management | Uses Hooks like useState | Uses this.state and this.setState() |
| Lifecycle Methods | Uses Hooks like useEffect | Uses lifecycle methods like componentDidMount, componentDidUpdate, etc. |
| This Keyword | ❌ No this keyword needed | ✅ Must use this to access props/state |
| Boilerplate | Less code, cleaner, easier to read | More code and syntax complexity |
| Hooks Support | ✅ Fully supported | ❌ Hooks not usable |
| Recommended By React Team | ✅ Yes – Functional components are the future | ⚠️ Still supported, but considered legacy for new code |