What is the difference between functional components and class components in 2026 RN?

Question

Accepted Answer

React originally shipped class components as the primary unit; functional components + hooks (React 16.8, 2019) are now the default and class components are essentially legacy. Class components: Extend React.Component ; require a render() method. State lives on this.state ; updated via this.setState . Lifecycle methods: componentDidMount , componentDidUpdate , componentWillUnmount , shouldComponentUpdate , etc. this binding pitfalls — must bind methods in constructor or use arrow methods. Functional components (2026 default): Plain JS functions returning JSX. State via useState / useReducer ; side effects via useEffect ; refs via useRef . Custom hooks for reusing logic between components — class HOCs were the awkward predecessor. Better TypeScript inference, cleaner closures, smaller code. Required for new React 18+ Concurrent features ( useTransition , useDeferredValue , the React Compiler). The one class still used: Error Boundaries — componentDidCatch / getDerivedStateFromError have no direct hook equivalent yet. In 2026 the right answer is: **functional components + hooks are the default**, and class components are essentially legacy. Mention three real reasons functional won: hooks make logic reusable across components (custom hooks), TypeScript inference is cleaner, and the React Compiler / Concurrent Mode features (Suspense, `useTransition`, `useDeferredValue`) are functional-first. The only class component still common is the **Error Boundary** — `componentDidCatch` has no hook equivalent yet.