Reactのクラスコンポーネント：state、ライフサイクル、関数への変換

クラスコンポーネントは、React.Component を継承し、render() メソッドからJSXを返すJavaScriptのクラスです。propsを this.props から読み、stateを this.state に持ち、this.setState() で更新します。新しいコードではフックを使った関数コンポーネントに取って代わられましたが、クラスは今も完全にサポートされ、多くの古いコードベースに登場し、エラーバウンダリを書く唯一の方法です。

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>
    );
}

それぞれのカウンターは自分のstateを持っています。3つ目の <Counter label="Plums" /> を追加すると、それも0から始まります。

クラスコンポーネントの構造

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>;
    }
}

• クラスは Component（または import React from 'react' での React.Component）を継承します。
• render() は必須です。関数コンポーネントの本体と同じように純粋でなければなりません。this.props と this.state を読み、JSXを返します。
• this.props はpropsを持ちます。読み取り専用です。
• stateは constructor で設定する（先に super(props) を呼びます）か、今ではより一般的にクラスフィールドとして設定します：state = { visits: 1 };。
• static defaultProps はReact 19でもクラスでは動きます（削除されたのは関数コンポーネントでだけです）。

this.setStateはマージし、更新関数も受け取れる

setState は、useState のセッターと2つの点で違います。渡したオブジェクトを現在のstateにマージするので、名前を挙げたキーだけを更新できます。そして、Reactのあらゆるstateの更新と同じく、すぐには適用されないので、次の値が前の値に依存するときは更新関数の形を使います。

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」は1しか増えません。3つの呼び出しすべてが同じ this.state.likes を読むからです。「+3 with updaters」は3増えます。「Move to Paris」は name と likes を保ちます（マージ）が、マージは1階層だけなので zip は失われます。残すには address: { ...this.state.address, city: 'Paris' } と書いてください。setState の省略可能な第2引数は更新の後に実行され、コンソールにはそこで新しい住所が表示されます。

イベントハンドラのbind

onClick={this.handleClick} として渡したメソッドは、後でそのオブジェクトなしの普通の関数として呼ばれるので、その中の this は 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 />;
}

1つ目のボタンは、undefined の setState を読むことについての TypeError を記録します。2つ目は動きます。クラスフィールドのアロー関数は、インスタンスが作られたときに this を捕まえるからです。古いコードで今もよく見る古い直し方は、コンストラクタでbindすることです。

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

インラインのアロー関数 onClick={() => this.handleClick()} でも動きます。

ライフサイクルメソッド

クラスは、決まった名前のメソッドでマウント、更新、アンマウントに反応します。よく見るものは次のとおりです。

• componentDidMount()：最初のレンダリングがDOMに反映された後。タイマー、購読、リクエストを始めます。
• componentDidUpdate(prevProps, prevState)：毎回の更新の後。作業をする前に前回の値と比べてください。そうしないとループします。
• componentWillUnmount()：取り除かれる前。componentDidMount で始めたものを元に戻します。
• shouldComponentUpdate(nextProps, nextState)：false を返すとレンダリングを飛ばします。

全一覧、実行される順番、そしてすべてをログに出すコンポーネントは、コンポーネントのライフサイクルのページにあります。

クラスを関数コンポーネントに変換する

次のクラスは、よくある3つのライフサイクルメソッドをすべて使っています。毎秒カウントし、label propが変わるとログを出し、取り除かれるとタイマーを止めます。

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>
    );
}

そして同じコンポーネントを関数にしたものです。各ライフサイクルメソッドはエフェクトの一部になり、関連するセットアップとクリーンアップが2つのメソッドに分かれず、隣り合って並びます。

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>
    );
}

どちらのタイマーも同じようにカウントし、ラベルが変わるたびにログを出します。エフェクトは最初のレンダリングの後にも実行されるので、関数版はマウント時にも1回ログを出します。どんな変換でも手順は次のとおりです。

1. this.props.x は分割代入したprop { x } になります。
2. this.state の各キーはそれぞれの useState になります。セッターはマージせずに置き換えることを忘れないでください。
3. メソッドはコンポーネントの中の普通の関数になります。bindは不要です。
4. componentDidMount、componentDidUpdate、componentWillUnmount は useEffect の呼び出しになり、いつ実行されるかではなく、何をするかでまとめます。
5. createRef は useRef になり、this.context と組み合わせた static contextType は useContext か use になります。

エラーバウンダリはクラスのままにしてください。関数の同等品はありません。

PureComponent

普通のクラスコンポーネントは、親がレンダリングされるたびにレンダリングされます。PureComponent はまず新しいpropsとstateを前回のものと1階層だけ比べ、何も変わっていなければレンダリングを飛ばします。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>
    );
}

ボタンをクリックしてください。PureLabel は同じ text を見るので、記録されるのは PlainLabel rendered だけです。両方に text={'hello ' + clicks} を渡すと、どちらもクリックのたびにレンダリングされます。

比較は浅いので、親のレンダリングのたびに新しいオブジェクトや関数になるprop（style={{ color: 'red' }}、onClick={() => ...}）はこれを打ち消します。React.memo と同じ落とし穴です。

React 19がクラスから削除したもの

古いクラスのコードを保守しているなら、React 19ではもう動かないパターンがいくつかあります。

• 文字列ref（ref="input" と this.refs.input）。createRef() かrefコールバックを使ってください。
• レガシーコンテキスト（contextTypes、childContextTypes、getChildContext）。static contextType と組み合わせた createContext を使ってください。
• propTypes は無視されます。TypeScriptか自前のチェックを使ってください。
• findDOMNode はなくなりました。代わりにDOM要素にrefを付けてください。

古い componentWillMount、componentWillReceiveProps、componentWillUpdate メソッドもレガシーです。古い名前と UNSAFE_ 付きの名前（UNSAFE_componentWillMount など）のどちらでも今は実行されますが、非推奨でStrictModeが警告するので、そのコードを componentDidMount、componentDidUpdate、getDerivedStateFromProps に移してください。