React 19+ · Class

Component

React.Component is the base class for class-based React components. Extend it and implement render; however, function components are recommended for new code.

How it works

React.Component is the base class for defining class-based React components. Extend it, implement render, and use props, state, or context through the instance; React calls render when it needs to determine the displayed UI. New code should generally prefer function components.

Syntax

class MyComponent extends Component<Props, State> { render() { return ...; } }

Returns

A React class component instance whose render method produces React nodes.

Key points

Use Component as the base class when defining a React component with JavaScript class syntax.
A class component needs to extend Component and provide render.
React may invoke render whenever it needs the component's visual output.
Most render implementations return JSX describing the UI.
Consumed context is read through this.context.
Class state is accessed through this.state.

Common mistakes

Class components remain supported, but React recommends function components for new code.
Class component state must be an object rather than a primitive value.
Update state with setState instead of mutating this.state.
Keep render free of side effects and use it only to calculate JSX.

Example: A class component with props

import { Component } from 'react';

class Greeting extends Component<{ name: string }> {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default function App() {
  return <Greeting name="Ada" />;
}

This class component extends React.Component and renders JSX from its props.

When to use it

Legacy component maintenance

Maintaining an existing class-based React component.

Class-based stateful UI

Using lifecycle methods or instance state in a class architecture.

Class context consumption

Consuming a declared context from a class instance.

Interview questions

QHow do you define a class component?

Extend Component and define a render method that returns the JSX React should display. React invokes render whenever it needs to determine the component's output.

Follow-up: How should state be changed? Use setState rather than directly mutating this.state.

QHow does state work in a class component?

Store state in the component's state field, which must be an object. Call setState to request an update instead of changing the field directly.

Follow-up: What constraint applies to render? It should be pure and only calculate JSX.

QHow does a class component consume context?

A class component receives context through this.context only when it declares which context to consume with static contextType. The consumed context is then available on the instance.

Follow-up: What is the recommended alternative for new components? Prefer function components rather than class components.

Component
PureComponent
createElement
memo

Source: Component – React. Checked 2026-10-15.