React Class Components: State, Lifecycle, Conversion

A class component is a JavaScript class that extends React.Component and returns JSX from a render() method. It reads props from this.props, keeps state in this.state, and updates it with this.setState(). Function components with hooks replaced them for new code, but classes are still fully supported, appear in many older codebases, and are the only way to write an error boundary.

import { Component } from 'react';

class Counter extends Component {
    state = { count: 0 };

    render() {
        return (
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                {this.props.label}: {this.state.count}
            </button>
        );
    }
}

export default function App() {
    return (
        <div style={{ display: 'flex', gap: 8 }}>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Each counter keeps its own state. Add a third <Counter label="Plums" /> and it starts at 0 too.

The anatomy of a class component

import { Component } from 'react';

class Welcome extends Component {
    static defaultProps = { name: 'stranger' };

    constructor(props) {
        super(props); // required before using this
        this.state = { visits: 1 };
    }

    render() {
        return <h1>Hello, {this.props.name}. Visit #{this.state.visits}</h1>;
    }
}

• The class extends Component (or React.Component with import React from 'react').
• render() is required. It must be pure, like a function component's body: read this.props and this.state, return JSX.
• this.props holds the props. They are read only.
• State can be set in a constructor (call super(props) first) or, more commonly today, as a class field: state = { visits: 1 };.
• static defaultProps still works for classes in React 19 (it was removed only for function components).

this.setState merges, and can take an updater

setState does two things differently from the useState setter. It merges the object you pass into the current state, so you update only the keys you name. And, like every React state update, it is not applied immediately, so use the updater form when the next value depends on the previous one.

import { Component } from 'react';

class Profile extends Component {
    state = { name: 'Ada', likes: 0, address: { city: 'London', zip: 'NW1' } };

    addThreeWrong = () => {
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
    };

    addThreeRight = () => {
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
    };

    moveCity = () => {
        // The merge is shallow: this replaces the whole address object
        this.setState({ address: { city: 'Paris' } }, () => console.log('after update:', this.state.address));
    };

    render() {
        const { name, likes, address } = this.state;
        return (
            <div>
                <p>{name} has {likes} likes and lives in {address.city} ({address.zip || 'no zip'}).</p>
                <button onClick={this.addThreeWrong}>+3 with objects</button>
                <button onClick={this.addThreeRight}>+3 with updaters</button>
                <button onClick={this.moveCity}>Move to Paris</button>
            </div>
        );
    }
}

export default function App() {
    return <Profile />;
}

"+3 with objects" adds one, because all three calls read the same this.state.likes. "+3 with updaters" adds three. "Move to Paris" keeps name and likes (the merge) but loses zip, because the merge is one level deep. Write address: { ...this.state.address, city: 'Paris' } to keep it. The optional second argument to setState runs after the update, and the console shows the new address there.

Binding event handlers

A method passed as onClick={this.handleClick} is called later as a plain function, without its object, so this inside it is undefined.

// This throws when you press the first button: this is undefined in an unbound method.
import { Component } from 'react';

class Toggle extends Component {
    state = { on: false };

    handleClickBroken() {
        this.setState({ on: !this.state.on });
    }

    handleClickArrow = () => {
        this.setState({ on: !this.state.on });
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClickBroken}>Broken method</button>
                <button onClick={this.handleClickArrow}>Class field arrow</button>
                <p>The switch is {this.state.on ? 'on' : 'off'}.</p>
            </div>
        );
    }
}

export default function App() {
    return <Toggle />;
}

The first button logs a TypeError about reading setState of undefined. The second works, because an arrow function in a class field captures this when the instance is created. The older fix, still common in legacy code, binds in the constructor:

constructor(props) {
    super(props);
    this.state = { on: false };
    this.handleClick = this.handleClick.bind(this);
}

An inline arrow, onClick={() => this.handleClick()}, also works.

Lifecycle methods

Classes react to mounting, updating and unmounting through methods with fixed names. The ones you will see most:

• componentDidMount(): after the first render is in the DOM. Start timers, subscriptions, requests.
• componentDidUpdate(prevProps, prevState): after every update. Compare with the previous values before doing work, or you will loop.
• componentWillUnmount(): before removal. Undo what componentDidMount started.
• shouldComponentUpdate(nextProps, nextState): return false to skip a render.

The component lifecycle page has the full list, the order they run in, and a component that logs every one.

Converting a class to a function component

Here is a class that uses all three common lifecycle methods. It ticks every second, logs when its label prop changes, and stops its timer when removed.

import { Component, useState } from 'react';

class Timer extends Component {
    state = { seconds: 0 };

    componentDidMount() {
        this.intervalId = setInterval(this.tick, 1000);
    }

    componentDidUpdate(prevProps) {
        if (prevProps.label !== this.props.label) {
            console.log('label changed to', this.props.label);
        }
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    tick = () => {
        this.setState((state) => ({ seconds: state.seconds + 1 }));
    };

    render() {
        return <p>{this.props.label}: {this.state.seconds}s</p>;
    }
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

And the same component as a function. Each lifecycle method becomes part of an effect, and related setup and cleanup sit next to each other instead of in two methods.

import { useEffect, useState } from 'react';

function Timer({ label }) {
    const [seconds, setSeconds] = useState(0);

    // componentDidMount + componentWillUnmount
    useEffect(() => {
        const intervalId = setInterval(() => setSeconds((s) => s + 1), 1000);
        return () => clearInterval(intervalId);
    }, []);

    // componentDidUpdate for label (this also runs once after mount)
    useEffect(() => {
        console.log('label is', label);
    }, [label]);

    return <p>{label}: {seconds}s</p>;
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

Both timers count the same way and log on every label change. The function version also logs once on mount, since an effect runs after the first render too. The steps for any conversion:

1. this.props.x becomes a destructured prop, { x }.
2. Each key of this.state becomes its own useState. Remember the setter replaces instead of merging.
3. Methods become plain functions inside the component. No binding needed.
4. componentDidMount, componentDidUpdate and componentWillUnmount become useEffect calls, grouped by what they do rather than by when they run.
5. createRef becomes useRef, and static contextType with this.context becomes useContext or use.

Leave error boundaries as classes; they have no function equivalent.

PureComponent

A normal class component renders every time its parent does. PureComponent first compares the new props and state with the previous ones, one level deep, and skips the render when nothing changed. It is the class counterpart of React.memo.

import { Component, PureComponent, useState } from 'react';

class PlainLabel extends Component {
    render() {
        console.log('PlainLabel rendered');
        return <p>Plain: {this.props.text}</p>;
    }
}

class PureLabel extends PureComponent {
    render() {
        console.log('PureLabel rendered');
        return <p>Pure: {this.props.text}</p>;
    }
}

export default function App() {
    const [clicks, setClicks] = useState(0);
    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>Re-render the parent ({clicks})</button>
            <PlainLabel text="hello" />
            <PureLabel text="hello" />
        </div>
    );
}

Click the button: only PlainLabel rendered is logged, because PureLabel sees the same text. Pass text={'hello ' + clicks} to both and they both render on every click.

The comparison is shallow, so a prop that is a new object or function on every parent render (style={{ color: 'red' }}, onClick={() => ...}) defeats it. That is the same trap as with React.memo.

Things React 19 removed from classes

If you maintain old class code, a few patterns no longer work in React 19:

• String refs (ref="input" with this.refs.input). Use createRef() or a ref callback.
• Legacy context (contextTypes, childContextTypes, getChildContext). Use createContext with static contextType.
• propTypes are ignored. Use TypeScript or your own checks.
• findDOMNode is gone. Put a ref on the DOM element instead.

The old componentWillMount, componentWillReceiveProps and componentWillUpdate methods are legacy too. They still run, under both the old names and the UNSAFE_ names (UNSAFE_componentWillMount and so on), but they are deprecated and StrictMode warns about them; move their code to componentDidMount, componentDidUpdate or getDerivedStateFromProps.