Both produce the same output; they differ in API and ergonomics. Function components + Hooks are the modern standard.

Class components (legacy)

class Counter extends React.Component {
  state = { count: 0 };
  componentDidMount() { /* setup */ }
  componentDidUpdate(prevProps) { /* react to changes */ }
  componentWillUnmount() { /* cleanup */ }
  render() {
    return <button onClick={() => this.setState({ count: this.state.count + 1 })}>
      {this.state.count}
    </button>;
  }
}

• State lives in this.state, updated via this.setState (merges).
• Side effects split across lifecycle methods.
• Bound to this — a frequent source of bugs (must bind handlers or use class fields).

Function components (modern)

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    /* setup */
    return () => { /* cleanup */ };
  }, []);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

• State via useState/useReducer.
• Side effects via useEffect — grouped by concern, not scattered across lifecycles.
• No this.

Key differences

Why Hooks won

• Logic reuse — custom Hooks extract stateful logic cleanly; the old HOC/render-prop patterns caused "wrapper hell."
• Co-location — useEffect groups related setup + cleanup together, instead of splitting one feature across componentDidMount and componentWillUnmount.
• No this — eliminates a whole class of binding bugs.
• Less boilerplate, easier to read and test.

Classes aren't deprecated and still work, but new code uses functions. The one thing only classes had — error boundaries — still requires a class today (or a library wrapper).

The framing

"Same capabilities, different API. Classes use this, this.state/setState, and lifecycle methods; function components use Hooks — useState, useEffect. Functions won because Hooks make logic reusable via custom Hooks instead of HOC wrapper-hell, co-locate effect setup and cleanup instead of scattering them across lifecycles, and drop this entirely. Classes still work and are still required for error boundaries, but new code is function components."