Hiprup

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

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.

// Class component (legacy)
import { Component } from 'react';
import { View, Text, Button } from 'react-native';

class Counter extends Component {
  state = { count: 0 };
  componentDidMount() { console.log('mounted'); }
  componentWillUnmount() { console.log('unmounted'); }
  render() {
    return (
      <View>
        <Text>{this.state.count}</Text>
        <Button title="+1" onPress={() => this.setState({ count: this.state.count + 1 })} />
      </View>
    );
  }
}

// Functional component (2026 default)
import { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log('mounted');
    return () => console.log('unmounted');
  }, []);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="+1" onPress={() => setCount(count + 1)} />
    </View>
  );
}

The class component uses extends Component, a state object, this.setState, and lifecycle methods. The equivalent functional component uses useState (returns [value, setter]) and useEffect for setup/cleanup.

Both render identical UI, but the functional version is shorter, type-friendlier, and supports hooks like useCallback, useMemo, useContext, and custom hooks — the class version cannot.

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.

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