Function components vs class components

Model answer. Both define reusable UI, but differently.

Class component: extends React.Component, keeps state in this.state, updates it with this.setState, and uses lifecycle methods such as componentDidMount.

class Counter extends React.Component {
  state = { n: 0 };
  render() { return <button onClick={() => this.setState({ n: this.state.n + 1 })}>{this.state.n}</button>; }
}

Function component: a plain function that takes props and returns JSX; state and side effects come from hooks.

function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

New code uses function components because:

• they are shorter, with no this binding problems;
• logic can be shared through custom hooks, instead of awkward HOCs or render props;
• new React features (Server Components, use, transitions) target functions.

Classes still work and appear in older codebases. The one feature without a hook equivalent is error boundaries (componentDidCatch), usually wrapped in a small library.