Function components are the modern default. Class components exist mostly for error boundaries and legacy code.

Side by side

// Class
class Welcome extends Component<{ name: string }, { count: number }> {
  state = { count: 0 };
  inc = () => this.setState({ count: this.state.count + 1 });
  componentDidMount() { document.title = this.props.name; }
  componentWillUnmount() { document.title = ''; }
  render() {
    return <button onClick={this.inc}>{this.state.count}</button>;
  }
}

// Function
function Welcome({ name }: { name: string }) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = name;
    return () => { document.title = ''; };
  }, [name]);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Why function components won

1. No 'this' binding — class methods needed arrow fields or bind; constant source of bugs.
2. Smaller, simpler — no boilerplate, no constructor, no extends.
3. Hooks compose — extract logic into custom hooks; classes had to use HOCs or render-props.
4. Better TypeScript — props are just function args; state is just useState.
5. Concurrent features — useTransition, useDeferredValue, useId — no class equivalents.
6. React Server Components — only work with function components.

Lifecycle mapping

When you still need a class

Error boundaries. No FC API yet.

class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error: Error) { logError(error); }
  render() {
    if (this.state.hasError) return <ErrorFallback />;
    return this.props.children;
  }
}

Most apps have one class component — the error boundary — wrapping a function-component tree.

Performance

The two are essentially equivalent. Class instances are slightly heavier (allocation), but the difference is unmeasurable in practice.

Migration

For greenfield: write only function components.

For legacy: don't rewrite working class components for the sake of it. Migrate when:

• You need a hook-only feature (useTransition, useDeferredValue).
• The lifecycle is gnarly enough that hooks would clean it up.
• You're touching the component for other reasons.

A wholesale class to function rewrite usually introduces more bugs than it prevents.

Class component gotchas

• setState is async — don't read this.state right after.
• Method binding: arrow class fields beat .bind() in constructor.
• componentWillMount, componentWillReceiveProps are deprecated (UNSAFE_ prefix).