Difference between Stateful and Stateless Component
| Feature | Stateful Component | Stateless Component |
|---|---|---|
| State Management | Maintains state data and can change it over time. | Does not maintain state internally; props are used to pass data. |
| Re-render Trigger | Re-renders when state or props change. | Re-renders only when props change. |
| Data Storage | Can store and manage local state data. | Relies on external data passed through props. |
| Example in React | Class component in React with setState method. |
Functional component in React with props argument. |
| Lifecycle Methods | Has access to lifecycle methods (e.g., componentDidMount). |
Does not have access to lifecycle methods. |
| Complexity | Tends to be more complex due to state management. | Simpler as it doesn't manage internal state. |
| Pure Components | Usually not pure, as state changes may trigger re-renders. | Stateless components are pure as they don't change internal state. |
| Performance | May have a performance impact due to state changes. | Generally has better performance as it's more predictable. |