Class Components (Legacy)

Class components are the older, longer way to write a React component -- like writing a letter by hand instead of typing it.

In this page:

Defining a Class Component
Accessing Props in a Class Component
Class vs Function Components

Defining a Class Component

A class component is written using the ES6 class syntax and must extend React.Component. Instead of a plain return statement, it defines a render() method that returns the JSX to display. This was the only way to use state in React before Hooks existed.

Note: You'll mostly encounter class components when reading older React codebases, not when writing new code today.

Warning: Forgetting to extend React.Component means React won't recognize your class as a valid component.

Example: Defining a Class Component

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    class Welcome extends React.Component {
      render() {
        return <h1>Welcome (class component)!</h1>;
      }
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<Welcome />);
  </script>
</body>
</html>

Accessing Props in a Class Component

Inside a class component, props are accessed via this.props instead of a function argument. This requires calling super(props) in the constructor if you define one, so React can properly wire up this.props for you.

Note: If you don't need a constructor, you can skip it entirely -- this.props still works fine in render().

Warning: Defining a constructor without calling super(props) first causes a runtime error.

Example: Accessing Props in a Class Component

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    class Greeting extends React.Component {
      render() {
        return <p>Hello, {this.props.name}!</p>;
      }
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<Greeting name="Sam" />);
  </script>
</body>
</html>

Class vs Function Components

Function components with Hooks can now do everything class components can, using less code and no need for this. Because of this, modern React documentation and most new projects use function components exclusively, keeping class components only for legacy code maintenance.

Note: If you're learning React today, focus on function components -- you'll rarely need to write a new class component.

Warning: Mixing up this.state/this.setState (class syntax) with useState (Hook syntax) is a common source of confusion when reading older tutorials.

Example: Class vs Function Components

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function ModernWay() {
      return <p>Function component: simpler syntax</p>;
    }
    class OldWay extends React.Component {
      render() {
        return <p>Class component: more boilerplate</p>;
      }
    }
    function App() {
      return <div><ModernWay /><OldWay /></div>;
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

Common Mistakes

Forgetting to call super(props) inside the constructor, which breaks access to this.props.
Trying to use Hooks (like useState) inside a class component -- Hooks only work in function components.
Forgetting the render() method must return JSX, just like a function component's return value.

Chapter Summary

Class components are an older syntax for writing React components using ES6 classes.
They must extend React.Component and define a render() method.
State and lifecycle methods work differently than the Hooks used in function components.
Modern React code favors function components with Hooks; class components are considered legacy.

Browser Support

Class components have been supported since React's earliest versions and remain supported in React 18, though they are no longer the recommended approach.

🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson Function Components Next Lesson → Passing Props

Class Components (Legacy)

Defining a Class Component

Accessing Props in a Class Component

Class vs Function Components

Chapter Quiz — Complete all 11 topics to unlock

Login to run this code