React: Class vs Functional
In the early days of React, developers had to choose between Class Components (for state and logic) and Functional Components (for simple, stateless UI). Today, thanks to React Hooks, Functional Components rule the ecosystem.
The Legacy: Class Components
Class components require extending React.Component and must contain a render() method. State is initialized in the constructor via this.state, and updated using the somewhat clunky this.setState().
They also rely heavily on "Lifecycle Methods" such as componentDidMount, componentDidUpdate, and componentWillUnmount. This often led to tangled logic spread across different methods.
The Modern Era: Functional Components
A Functional Component is literally just a plain JavaScript function that returns JSX. Historically called "Dumb Components", they became incredibly smart with the release of React 16.8.
They ditch the boilerplate. No this bindings, no constructors, and no sprawling lifecycle methods. Code is cleaner, shorter, and easier to test.
The Magic of Hooks
Hooks are functions that let you "hook into" React state and lifecycle features from functional components. useState replaced this.state. useEffect replaced almost all of the lifecycle methods (mount, update, unmount) with a single API.
When to use Class Components today?+
Almost never. The React team recommends Functional Components and Hooks for all new code. You will only need Class components if you are maintaining older legacy systems, or in very rare niche cases involving Error Boundaries (though this is slowly changing too).