Component

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

• リファレンス
  • Component
  • context
  • props
  • refs
  • state
  • constructor(props)
  • componentDidCatch(error, info)
  • componentDidMount()
  • componentDidUpdate(prevProps, prevState, snapshot?)
  • componentWillMount()
  • componentWillReceiveProps(nextProps)
  • componentWillUpdate(nextProps, nextState)
  • componentWillUnmount()
  • forceUpdate(callback?)
  • getChildContext()
  • getSnapshotBeforeUpdate(prevProps, prevState)
  • render()
  • setState(nextState, callback?)
  • shouldComponentUpdate(nextProps, nextState, nextContext)
  • UNSAFE_componentWillMount()
  • UNSAFE_componentWillReceiveProps(nextProps, nextContext)
  • UNSAFE_componentWillUpdate(nextProps, nextState)
  • static childContextTypes
  • static contextTypes
  • static contextType
  • static defaultProps
  • static propTypes
  • static getDerivedStateFromError(error)
  • static getDerivedStateFromProps(props, state)
• 使用法
  • クラスコンポーネントを�?�義する
  • クラスコンポーネントに state を追加する
  • クラスコンポーネントにライフサイクルメソッドを追加する
  • エラーバウンダリでレンダー中�?エラーをキャッチする
• 代替案
  • シンプルなコンポーネントをクラスから関数へ移行
  • state を持つコンポーネントをクラスから関数へ移行
  • ライフサイクルメソッドを持つコンポーネントをクラスから関数へ移行
  • コンテクストを持つコンポーネントをクラスから関数へ移行

リファレンス

Component

クラスとして React コンポーネントを�?�義するには、組み込み�? Component クラスを継承し、render メソッドを�?�義します。

import { Component } from 'react';

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

render メソッド�?みが必須です。他�?メソッドはオプションです。

さらに例を見る

context

クラスコンポーネントではコンテクストを this.context �?形で利用できます。これは、static contextType（現行版）または static contextTypes（非推奨）を使用して受け取りたいコンテクストを指�?�した場合に�?み利用できます。

クラスコンポーネントは、一度に 1 �?類�?コンテクストしか読み取ることができません。

class Button extends Component {
  static contextType = ThemeContext;

  render() {
    const theme = this.context;
    const className = 'button-' + theme;
    return (
      <button className={className}>
        {this.props.children}
      </button>
    );
  }
}

props

クラスコンポーネントに渡された props は this.props �?形で利用できます。

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

<Greeting name="Taylor" />

refs

こ�?コンポーネント�?レガシーな文字列形式 ref にアクセスできます。

state

クラスコンポーネント�? state は this.state �?形で利用できます。state フィールドはオブジェクトでなければなりません。state を直接書き換えてはいけません。state を変更したい場合は、新しい state を引数にして setState を呼び出します。

class Counter extends Component {
  state = {
    age: 42,
  };

  handleAgeChange = () => {
    this.setState({
      age: this.state.age + 1 
    });
  };

  render() {
    return (
      <>
        <button onClick={this.handleAgeChange}>
        Increment age
        </button>
        <p>You are {this.state.age}.</p>
      </>
    );
  }
}

constructor(props)

コンストラクタは、クラスコンポーネントがマウント（画面に追加）される前に�?�行されます。通常 React では、コンストラクタは 2 つ�?�?的で�?み利用されます。state �?�?�言と、クラスメソッド�?クラスインスタンスへ�?バインドです。

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // ...
  }

モダンな JavaScript 構文を使用している場合、コンストラクタはほとんど必要ありません。代わりに上記�?コードは、モダンブラウザや Babel など�?ツールでサポートされているパブリッククラスフィールド構文を使用して書き直すことができます。

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

  handleClick = () => {
    // ...
  }

コンストラクタには副作用やサブスクリプション（subscription, イベント登録や外部データ購読）を一切含めてはいけません。

引数

• props: コンポーネント�?初期 props。

返り値

constructor は何も返してはいけません。

注意点

• コンストラクタ内で副作用やサブスクリプションを�?�行しないでください。代わりに componentDidMount を使用してください。

• コンストラクタ内では、他�?すべて�?ステートメント�?前に super(props) を呼び出す必要があります。これを行わないと、コンストラクタが�?�行されている間 this.props が undefined になるため、混乱を招きバグ�?原因となる可能性があります。

• this.state を直接セットして良い唯一�?場所がコンストラクタです。他�?すべて�?メソッド内では、代わりに this.setState() を使用する必要があります。コンストラクタ内で setState を呼び出さないでください。

• サーバレンダリングを使用する場合、コンストラクタもサーバ上で�?�行され、そ�?後に render メソッドが続きます。ただし、componentDidMount や componentWillUnmount �?ようなライフサイクルメソッドはサーバ上では�?�行されません。

• Strict Mode が有効�?場合、React は開発環境において constructor を 2 回呼び出し、2 つ�?インスタンス�?うち 1 つを破棄します。これにより、constructor 外に移動するべき偶発的な副作用に気づきやすくなります。

componentDidCatch(error, info)

componentDidCatch を�?�義すると、子コンポーネント（遠く�?子を含む）がレンダー中にエラーをスローしたときに React がそれを呼び出します。これにより、本番環境でそ�?エラーをエラーレポートサービスにログとして記録することができます。

通常これは、エラーに反応して state を更新し、ユーザにエラーメッセージを表示するため�? static getDerivedStateFromError と一緒に使用されます。これら�?メソッドを持つコンポーネント�?ことをエラーバウンダリ (error boundary) と呼びます。

例を見る

引数

• error: スローされたエラー。現�?�的には通常 Error �?インスタンスになりますが、こ�?ことは保証されていません。JavaScript では文字列や null すら含む、任意�?値を throw することが許されているためです。

• info: エラーに関する追加情報を含むオブジェクト。そ�? componentStack フィールドには、スローしたコンポーネントとそ�?すべて�?親コンポーネント�?名前およびソース上�?位�?を含んだスタックトレースが含まれます。本番環境では、コンポーネント名はミニファイされています。本番環境用にエラーレポートを設�?�する場合は、通常�? JavaScript エラースタックと同じように、ソースマップを使用してコンポーネントスタックをデコードできます。

返り値

componentDidCatch は何も返してはいけません。

注意点

• 以前は、UI を更新してフォールバック�?エラーメッセージを表示するために componentDidCatch 内で setState を呼び出すことが一般的でした。これは非推奨となり、代わりに static getDerivedStateFromError を�?�義することが推奨されています。

• React �?本番用ビルドと開発用ビルドでは、componentDidCatch がエラーを処理する方法がわずかに異なります。開発中は、エラーが window にまでバブルアップするため、window.onerror や window.addEventListener('error', callback) といったコードが componentDidCatch によってキャッチされたエラーを捕まえることができます。一方で本番環境ではエラーはバブルアップしないため、祖先�?エラーハンドラは componentDidCatch によって明示的にキャッチされなかったエラー�?みを受け取ります。

componentDidMount()

componentDidMount メソッドを�?�義すると、コンポーネントが画面に追加（マウント）されたときに React がそれを呼び出します。一般的にはここで、データ取得、サブスクリプション設�?�や DOM ノード�?操作を開始します。

componentDidMount を�?�装する場合、通常はバグを避けるために他�?ライフサイクルメソッドも�?�装する必要があります。例えば、componentDidMount が何らか�? state や props を読み取る場合はそれらに変更があった場合に処理するために componentDidUpdate を�?�装する必要があり、componentDidMount が�?�行したことをクリーンアップするためには componentWillUnmount を�?�装する必要があります。

class ChatRoom extends Component {
  state = {
    serverUrl: 'https://localhost:1234'
  };

  componentDidMount() {
    this.setupConnection();
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.props.roomId !== prevProps.roomId ||
      this.state.serverUrl !== prevState.serverUrl
    ) {
      this.destroyConnection();
      this.setupConnection();
    }
  }

  componentWillUnmount() {
    this.destroyConnection();
  }

  // ...
}

他�?例を見る

引数

componentDidMount は引数を受け取りません。

返り値

componentDidMount は何も返してはいけません。

注意点

• Strict Mode がオン�?場合、React は開発中に componentDidMount を呼び出し、直後に componentWillUnmount を呼び出し、そして再度 componentDidMount を呼び出します。これにより、componentWillUnmount �?�?�装を忘れた場合や、そ�?ロジックが componentDidMount �?挙動と正しく「鏡�?ように対応」していない場合に気づきやすくなります。

• componentDidMount �?中で直ちに setState を呼び出すことは可能ですが、可能な限り避けるべきです。これは追加�?レンダーを引き起こしますが、ブラウザが画面を更新する前に発生します。こ�?ため、こ�?ケースでは render が 2 回呼び出されはしますが、ユーザは中途半端な state を見ずに済みます。こ�?パターンはしばしばパフォーマンス�?問題を引き起こすため、注意して使用してください。ほとんど�?場合、初期 state を constructor で代入できるはずです。ただし、モーダルやツールチップ�?ような場合は、何らか�? DOM ノード�?位�?やサイズに依存する要素をレンダーする�?に DOM ノード�?測�?�を行うため、これが必要になることがあります。

componentDidUpdate(prevProps, prevState, snapshot?)

componentDidUpdate メソッドを�?�義すると、コンポーネントが更新後�? props や state で再レンダーされた直後に React がそれを呼び出します。こ�?メソッドは初回レンダーでは呼び出されません。

更新後に DOM を操作するためにこれを使用することができます。これはまた、ネットワークリクエストを行う一般的な場所でもありますが、現在�? props を前�? props と比較する必要があります（例えば props が変更されていない場合、新しいネットワークリクエストは必要ないかもしれません）。通常、componentDidMount や componentWillUnmount と一緒に使用します。

class ChatRoom extends Component {
  state = {
    serverUrl: 'https://localhost:1234'
  };

  componentDidMount() {
    this.setupConnection();
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.props.roomId !== prevProps.roomId ||
      this.state.serverUrl !== prevState.serverUrl
    ) {
      this.destroyConnection();
      this.setupConnection();
    }
  }

  componentWillUnmount() {
    this.destroyConnection();
  }

  // ...
}

他�?例を見る

引数

• prevProps: 更新前�? props。prevProps と this.props を比較して何が変わったかを判断します。

• prevState: 更新前�? state。prevState と this.state を比較して何が変わったかを判断します。

• snapshot: getSnapshotBeforeUpdate を�?�装した場合、snapshot にはそ�?メソッドから返された値が含まれます。それ以外�?場合は undefined になります。

返り値

componentDidUpdate は何も返してはいけません。

注意点

• shouldComponentUpdate が�?�義されており、それが false を返す場合、componentDidUpdate は呼び出されません。

• componentDidUpdate 内�?ロジックは通常、this.props と prevProps、this.state と prevState を比較する条件文でラップする必要があります。そうでなければ、無限ループを作り出すリスクがあります。

• componentDidUpdate �?中で直ちに setState を呼び出すことは可能ですが、可能な限り避けるべきです。これは追加�?レンダーを引き起こしますが、ブラウザが画面を更新する前に発生します。こ�?ため、こ�?ケースでは render が 2 回呼び出されはしますが、ユーザは中途半端な state を見ずに済みます。こ�?パターンはしばしばパフォーマンス�?問題を引き起こします。ただし、モーダルやツールチップ�?ようなレアなケースでは、何らか�? DOM ノード�?位�?やサイズに依存する要素をレンダーする�?に DOM ノード�?測�?�を行うため、これが必要になることがあります。

componentWillMount()

componentWillReceiveProps(nextProps)

componentWillUpdate(nextProps, nextState)

componentWillUnmount()

componentWillUnmount メソッドを�?�義すると、React はコンポーネントが画面から削除（アンマウント）される前にこれを呼び出します。ここがデータ�?取得をキャンセルしたり、サブスクリプションを削除する�?に一般的な場所です。

componentWillUnmount 内�?ロジックは componentDidMount 内�?ロジックと「鏡�?ように対応」するべきです。例えば、componentDidMount がサブスクリプション�?設�?�を行う場合、componentWillUnmount はそ�?サブスクリプションをクリーンアップするべきです。componentWillUnmount �?クリーンアップロジックが props や state を読み取る場合、通常は古い props と state に対応するリソース（サブスクリプションなど）をクリーンアップするために componentDidUpdate も�?�装する必要があります。

class ChatRoom extends Component {
  state = {
    serverUrl: 'https://localhost:1234'
  };

  componentDidMount() {
    this.setupConnection();
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.props.roomId !== prevProps.roomId ||
      this.state.serverUrl !== prevState.serverUrl
    ) {
      this.destroyConnection();
      this.setupConnection();
    }
  }

  componentWillUnmount() {
    this.destroyConnection();
  }

  // ...
}

他�?例を見る

引数

componentWillUnmount は引数を受け取りません。

返り値

componentWillUnmount は何も返してはいけません。

注意点

• Strict Mode がオン�?場合、React は開発中に componentDidMount を呼び出し、直後に componentWillUnmount を呼び出し、そして再度 componentDidMount を呼び出します。これにより、componentWillUnmount �?�?�装を忘れた場合や、そ�?ロジックが componentDidMount �?挙動と正しく「鏡�?ように対応」していない場合に気づきやすくなります。

forceUpdate(callback?)

コンポーネントを強制的に再レンダーします。

通常、これは必要ありません。コンポーネント�? render メソッドが this.props、this.state および this.context から�?み読み取りを行う場合、コンポーネント内またはそ�?親で setState が呼び出されると自動的に再レンダーが発生します。しかし、コンポーネント�? render メソッドが外部データソースから直接読み取りを行っている場合、そ�?データソースが変更されたときに React にユーザインターフェースを更新するように指示する必要があります。forceUpdate はそれを行えるようにするため�?も�?です。

あらゆる forceUpdate �?使用は避け、render 内では this.props と this.state から�?み読み取るようにしてください。

引数

• 省略可能 callback: 指�?�された場合、React は更新がコミットされた後に、渡された callback を呼び出します。

返り値

forceUpdate は何も返しません。

注意点

• forceUpdate を呼び出すと、React は shouldComponentUpdate を呼び出さずに再レンダーします。

getChildContext()

こ�?コンポーネントが提供するレガシーコンテクスト�?値を指�?�します。

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate を�?�装すると、React は DOM を更新する直前にそれを呼び出します。これにより、コンポーネントは DOM から情報（例えばスクロール位�?）を取得することができます。こ�?ライフサイクルメソッドが返すあらゆる値は、componentDidUpdate に引数として渡されます。

例えば、更新間でスクロール位�?を保持する必要があるチャットスレッド�?ような UI でこれを使用することができます。

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

上記�?例では、getSnapshotBeforeUpdate で直接 scrollHeight プロパティを読み取ることが重要です。render、UNSAFE_componentWillReceiveProps、または UNSAFE_componentWillUpdate で読み取ることは�?�全ではありません。これら�?メソッドが呼び出されてから React が DOM を更新するまでに時間�?がある可能性があるためです。

引数

• prevProps: 更新前�? props。prevProps と this.props を比較して何が変わったかを判断します。

• prevState: 更新前�? state。prevState と this.state を比較して何が変わったかを判断します。

返り値

任意�?型�?スナップショット値、または null を返してください。返した値は、componentDidUpdate �?第 3 引数として渡されます。

注意点

• shouldComponentUpdate が�?�義されており、false を返す場合、getSnapshotBeforeUpdate は呼び出されません。

render()

render メソッドは、クラスコンポーネントにおける唯一�?必須メソッドです。

render メソッドは、画面に表示したいも�?を指�?�します。例えば：

import { Component } from 'react';

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

React はあらゆるタイミングで render を呼び出す可能性があるため、特�?��?時間に�?�行されることを前提にしてはいけません。通常、render メソッドは JSX を返すべきですが、いくつか�?他�?型�?返り値（文字列など）もサポートされています。返すべき JSX を計�?�するために、render メソッドは this.props、this.state、および this.context を読み取ることができます。

render メソッドは純関数として書くべきです。つまり、props、state、コンテクストが同じであれば同じ結果を返すべきです。また、副作用（サブスクリプション�?設�?�など）を含んだり、ブラウザ�? API とやり取りしたりするべきではありません。副作用は、イベントハンドラや componentDidMount �?ようなメソッド内で行うべきです。

引数

render は引数を受け取りません。

返り値

render はあらゆる有効な React ノードを返すことができます。これには、<div /> �?ような React 要素、文字列、数値、ポータル、空�?ノード（null、undefined、true、false）、および React ノード�?配列が含まれます。

注意点

• render は props、state、コンテクストに対する純関数として書くべきです。副作用を持ってはいけません。

• shouldComponentUpdate が�?�義されており false を返す場合、render は呼び出されません。

• Strict Mode が有効�?場合、React は開発中に render を 2 回呼び出し、そ�?うち�? 1 つ�?結果を破棄します。これにより、render メソッド�?外に移動するべき偶発的な副作用に気づきやすくなります。

• render �?呼び出しとそ�?後�? componentDidMount や componentDidUpdate �?呼び出しと�?間に一対一�?対応関係はありません。React が必要と判断した場合、render �?呼び出し結果�?一部は破棄される可能性があります。

setState(nextState, callback?)

setState �?呼び出しは React コンポーネント�? state �?更新を行います。

class Form extends Component {
  state = {
    name: 'Taylor',
  };

  handleNameChange = (e) => {
    const newName = e.target.value;
    this.setState({
      name: newName
    });
  }

  render() {
    return (
      <>
        <input value={this.state.name} onChange={this.handleNameChange} />
        <p>Hello, {this.state.name}.</p>
      </>
    );
  }
}

setState はコンポーネント�? state へ�?更新をキューに入れます。これは、こ�?コンポーネントとそ�?子を新しい state で再レンダーする必要があることを React に伝えます。これが、ユーザ操作に対応してユーザインターフェースを更新するため�?主要な方法となります。

function handleClick() {
  console.log(this.state.name); // "Taylor"
  this.setState({
    name: 'Robin'
  });
  console.log(this.state.name); // Still "Taylor"!
}

また、setState に関数を渡すこともできます。これにより、前�? state に基づいて state を更新することができます。

  handleIncreaseAge = () => {
    this.setState(prevState => {
      return {
        age: prevState.age + 1
      };
    });
  }

こうする必要があるわけではありませんが、同じイベント中に複数回 state を更新したい場合には有用です。

引数

• nextState：オブジェクトまたは関数。

  • nextState としてオブジェクトを渡すと、それは this.state に浅く (shallow) マージされます。
  • nextState として関数を渡すと、それは更新用関数 (updater function) として扱われます。そ�?関数は純関数でなければならず、state と props �?現在値を引数として取り、this.state に浅くマージされるため�?オブジェクトを返します。React はこ�?更新用関数をキューに入れてからコンポーネントを再レンダーします。次�?レンダー中に、React は前�? state に対してキューに入れられたすべて�?更新用関数を適用し、次回�? state を計�?�します。

• 省略可能 callback: 指�?�された場合、React は更新がコミットされた後に渡された callback を呼び出します。

返り値

setState は何も返しません。

注意点

• setState は即時的なコンポーネント�?更新命令ではなく、リクエストだと考えてください。複数�?コンポーネントがイベントに応じて state を更新するとき、React はそれら�?更新をバッチ（束ね）処理し、イベント�?終了時に 1 度だけ再レンダーします。特�?��? state 更新を強制的に同期的に適用する必要がある稀なケースでは、flushSync でラップすることができますが、これはパフォーマンスを低下させる可能性があります。

• setState は this.state を即時に更新しません。こ�?ため、setState を呼び出した直後に this.state を読み取ることは潜在的な落とし穴となります。代わりに、componentDidUpdate または setState �? callback 引数を使用してください。どちらも更新が適用された後に発火することが保証されています。前�? state に基づいた state を設�?�する必要がある場合、上記で説明したように nextState として関数を渡すことができます。

shouldComponentUpdate(nextProps, nextState, nextContext)

shouldComponentUpdate を�?�義すると、React は再レンダーをスキップできるかどうかを判断するためにそれを呼び出します。

これを本当に手動で書きたい場合は、this.props と nextProps、this.state と nextState を比較した上で false を返すことで、更新をスキップできると React に伝えることができます。

class Rectangle extends Component {
  state = {
    isHovered: false
  };

  shouldComponentUpdate(nextProps, nextState) {
    if (
      nextProps.position.x === this.props.position.x &&
      nextProps.position.y === this.props.position.y &&
      nextProps.size.width === this.props.size.width &&
      nextProps.size.height === this.props.size.height &&
      nextState.isHovered === this.state.isHovered
    ) {
      // Nothing has changed, so a re-render is unnecessary
      return false;
    }
    return true;
  }

  // ...
}

新しい props や state を受け取る際に React は shouldComponentUpdate を呼び出します。デフォルトは true です。こ�?メソッドは初回レンダー�?場合と forceUpdate が使用された場合には呼び出されません。

引数

• nextProps: コンポーネントがレンダーしようとしている次�? props。何が変わったかを判断するために nextProps を this.props と比較します。
• nextState: コンポーネントがレンダーしようとしている次�? state。何が変わったかを判断するために nextState を this.state と比較します。
• nextContext: コンポーネントがレンダーしようとしている次�?コンテクスト。何が変わったかを判断するために nextContext を this.context と比較します。static contextType（現行版）または static contextTypes（レガシー）を指�?�した場合�?み利用可能です。

返り値

コンポーネントを再レンダーしたい場合は true を返します。これがデフォルト�?挙動です。

再レンダーがスキップ可能であると React に伝えるためには false を返します。

注意点

• こ�?メソッドはパフォーマンス最適化�?ためだけに存在しています。もし、こ�?メソッドがないとコンポーネントが壊れる場合は、まずそれを�?正してください。

• shouldComponentUpdate を手書きする代わりに、PureComponent �?使用を検討してください。PureComponent は props と state を浅く比較し、必要な更新までスキップしてしまう可能性を減らします。

• shouldComponentUpdate で深い等価性チェックを行ったり、JSON.stringify を使用したりすることはお勧めしません。これによりパフォーマンスがあらゆる props と state �?データ構造に依存するようになり、予測不可能になります。よくてもアプリケーションが数秒間フリーズするリスクがあり、最悪�?場合はクラッシュする危険があります。

• false を返しても、子コンポーネント�? state が変更された場合に子コンポーネント�?再レンダーが抑止されるわけではありません。

• false を返しても、コンポーネントが再レンダーされないことが保証されるわけではありません。React は返り値をヒントとして使用しますが、他�?理由でコンポーネントを再レンダーすることが理にかなっていると判断した場合、再レンダーを行うことがあります。

UNSAFE_componentWillMount()

UNSAFE_componentWillMount を�?�義すると、React は constructor �?直後にそれを呼び出します。これは歴史的な理由で存在するも�?であり、新しいコードでは使用すべきではありません。代わりに以下�?代替手�?��?いずれかを使用してください。

• state を初期化するためには、state をクラスフィールドとして�?�言するか、constructor で this.state を設�?�します。
• 副作用を�?�行する必要があるか、サブスクリプションを設�?�する必要がある場合は、そ�?ロジックを componentDidMount に移動します。

�?�全でないライフサイクルから�?移行例を見る

引数

UNSAFE_componentWillMount は引数を受け取りません。

返り値

UNSAFE_componentWillMount は何も返してはいけません。

注意点

• コンポーネントが static getDerivedStateFromProps または getSnapshotBeforeUpdate を�?�装している場合、UNSAFE_componentWillMount は呼び出されません。

• Suspense �?ようなモダンな React 機能を使用しているアプリでは、UNSAFE_componentWillMount はそ�?名前に反して、コンポーネントが本当にマウントされることを保証しません。（例えば子コンポーネント�?コードがまだロードされていないなど�?理由で）レンダー�?試行がサスペンドした場合、React は進行中�?ツリーを破棄し、次�?試行にてコンポーネントをゼロから構築しようとします。これがこ�?メソッドが “unsafe” となっている理由です。�?�際にマウントされたという事�?�に依存するコード（サブスクリプション�?追加など）は componentDidMount に入れるべきです。

• UNSAFE_componentWillMount はサーバレンダリング中に�?�行される唯一�?ライフサイクルメソッドです。現�?�的にはあらゆる利用�?的においてこれは constructor と同一であるため、こ�?タイプ�?ロジックには constructor を使用すべきです。

UNSAFE_componentWillReceiveProps(nextProps, nextContext)

UNSAFE_componentWillReceiveProps を�?�義すると、コンポーネントが新しい props を受け取るときに React がそれを呼び出します。これは歴史的な理由で存在するも�?であり、新しいコードでは使用すべきではありません。代わりに以下�?代替手�?��?いずれかを使用してください。

• props �?変更に応じて副作用を�?�行する必要がある場合（例えば、データ�?取得、アニメーション�?�?�行、またはサブスクリプション�?再初期化）、そ�?ロジックを代わりに componentDidUpdate に移動してください。
• 一部�? props が変更されたときにあるデータ�?再計�?�を避ける必要がある場合、代わりにメモ化ヘルパーを使用してください。
• props が変更されたときにある state を「リセット」する必要がある場合、コンポーネントを�?�全に制御されたコンポーネントにするか、key 付き�?非制御コンポーネントにすることを検討してください。
• props が変更されたときにある state を「調整」する必要がある場合、レンダー中に props �?みから必要な情報をすべて計�?�できないか確認してください。できない場合は、代わりに static getDerivedStateFromProps を使用してください。

�?�全でないライフサイクルから�?移行�?例を見る

引数

• nextProps: コンポーネントが親コンポーネントから受け取ろうとしている次�? props。何が変更されたかを判断するために nextProps を this.props と比較します。
• nextContext: コンポーネントが最も近いプロバイダから受け取ろうとしている次�?コンテクスト。何が変更されたかを判断するために nextContext を this.context と比較します。static contextType（現行版）または static contextTypes（レガシー）を指�?�した場合�?み利用可能です。

返り値

UNSAFE_componentWillReceiveProps は何も返してはいけません。

注意点

• static getDerivedStateFromProps または getSnapshotBeforeUpdate を�?�装しているコンポーネントでは、UNSAFE_componentWillReceiveProps は呼び出されません。

• Suspense �?ようなモダンな React 機能を使用しているアプリでは、UNSAFE_componentWillReceiveProps はそ�?名前に反して、コンポーネントがそ�? props を本当に受け取ることを保証しません。（例えば子コンポーネント�?コードがまだロードされていないなど�?理由で）レンダー�?試行がサスペンドした場合、React は進行中�?ツリーを破棄し、次�?試行にてコンポーネントをゼロから構築しようとします。次�?レンダー�?試行�?時点では、props は異なっている可能性があります。これがこ�?メソッドが “unsafe” となっている理由です。コミットされた更新�?みに対して�?�行すべきコード（サブスクリプション�?リセットなど）は、componentDidUpdate に入れるべきです。

• UNSAFE_componentWillReceiveProps が呼ばれてもコンポーネントが前回と異なる props を受け取ったことを意味するも�?ではありません。何かが変わったかどうかを確認するには nextProps と this.props を自分で比較する必要があります。

• React はマウント時に UNSAFE_componentWillReceiveProps を初期 props を引数に呼び出すことはありません。こ�?メソッドは、コンポーネント�? props �?一部が更新される予�?��?場合に�?み呼び出されます。例えば、setState を呼び出しても、一般的には同じコンポーネント内�? UNSAFE_componentWillReceiveProps はトリガされません。

UNSAFE_componentWillUpdate(nextProps, nextState)

UNSAFE_componentWillUpdate を�?�義すると、新しい props または state でレンダーする前に React がそれを呼び出します。これは歴史的な理由で存在するも�?であり、新しいコードでは使用すべきではありません。代わりに以下�?代替手�?��?いずれかを使用してください。

• prop または state �?変更に応じて副作用（例えば、データ�?取得、アニメーション�?�?�行、サブスクリプション�?再初期化など）を�?�行する必要がある場合、そ�?ロジックを componentDidUpdate に移動してください。
• DOM から情報を読み取り（例えば、現在�?スクロール位�?を保存するなど）、それを後で componentDidUpdate で使用する場合は、getSnapshotBeforeUpdate 内で読み取るようにしてください。

�?�全でないライフサイクルから�?移行例を見る

引数

• nextProps: コンポーネントが次にレンダーする予�?��? props。何が変わったかを判断するために、nextProps と this.props を比較します。
• nextState: コンポーネントが次にレンダーする予�?��? state。何が変わったかを判断するために、nextState と this.state を比較します。

返り値

UNSAFE_componentWillUpdate は何も返してはいけません。

注意点

• shouldComponentUpdate が�?�義されており false を返す場合、UNSAFE_componentWillUpdate は呼び出されません。

• コンポーネントが static getDerivedStateFromProps または getSnapshotBeforeUpdate を�?�装している場合、UNSAFE_componentWillUpdate は呼び出されません。

• componentWillUpdate �?呼び出し中に setState（または最終的に setState が呼び出されるようなあらゆるメソッド、例えば Redux アクション�?ディスパッチ）を呼び出すことはサポートされていません。

• Suspense �?ようなモダンな React 機能を使用しているアプリでは、UNSAFE_componentWillUpdate はそ�?名前に反して、コンポーネントが本当に更新されることを保証しません。（例えば子コンポーネント�?コードがまだロードされていないなど�?理由で）レンダー�?試行がサスペンドした場合、React は進行中�?ツリーを破棄し、次�?試行にてコンポーネントをゼロから構築しようとします。次�?レンダー�?試行�?時点では props と state は異なっている可能性があります。これがこ�?メソッドが “unsafe” となっている理由です。コミットされた更新�?みに対して�?�行すべきコード（サブスクリプション�?リセットなど）は、componentDidUpdate に入れるべきです。

• UNSAFE_componentWillUpdate が呼ばれてもコンポーネントが前回とは異なる props や state を受け取ったことを意味するも�?ではありません。何かが変わったかどうかを確認するには、nextProps と this.props、nextState と this.state を自分で比較する必要があります。

• React は props や state �?初期値を使ってマウント時に UNSAFE_componentWillUpdate を呼び出すことはしません。

static childContextTypes

こ�?コンポーネントによって提供されるレガシーコンテクストを指�?�します。

static contextTypes

こ�?コンポーネントが使用するレガシーコンテクストを指�?�します。

static contextType

クラスコンポーネントで this.context を読み取りたい場合、読み取りたいコンテクストをこれで指�?�する必要があります。static contextType として指�?�するコンテクストは、以前に createContext で作成されている値でなければなりません。

class Button extends Component {
  static contextType = ThemeContext;

  render() {
    const theme = this.context;
    const className = 'button-' + theme;
    return (
      <button className={className}>
        {this.props.children}
      </button>
    );
  }
}

static defaultProps

クラス�?デフォルト�? props を設�?�するために static defaultProps を�?�義できます。これらは undefined および存在しない props に対して使用されますが、null である props には使用されません。

例えば以下�?ようにして、props である color がデフォルトで 'blue' になるよう�?�義できます。

class Button extends Component {
  static defaultProps = {
    color: 'blue'
  };

  render() {
    return <button className={this.props.color}>click me</button>;
  }
}

color prop が渡されない場合や undefined である場合、デフォルトで 'blue' にセットされます。

<>
  {/* this.props.color is "blue" */}
  <Button />

  {/* this.props.color is "blue" */}
  <Button color={undefined} />

  {/* this.props.color is null */}
  <Button color={null} />

  {/* this.props.color is "red" */}
  <Button color="red" />
</>

static propTypes

コンポーネントが受け入れる props �?型を�?�言するために、prop-types ライブラリと一緒に static propTypes を�?�義することができます。これら�?型はレンダー中、かつ開発中に�?みチェックされます。

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  static propTypes = {
    name: PropTypes.string
  };

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

static getDerivedStateFromError(error)

static getDerivedStateFromError を�?�義すると、子コンポーネント（遠く�?子を含む）がレンダー中にエラーをスローしたときに React がそれを呼び出します。これにより、UI をクリアする代わりにエラーメッセージを表示できます。

通常これは、エラーレポートを何らか�?分析サービスに送信できるようにするため�? componentDidCatch と一緒に使用されます。これら�?メソッドを持つコンポーネント�?ことをエラーバウンダリと呼びます。

例を見る

引数

• error: スローされたエラー。現�?�的には通常 Error �?インスタンスになりますが、こ�?ことは保証されていません。JavaScript では文字列や null すら含む、任意�?値を throw することが許されているためです。

返り値

static getDerivedStateFromError からは、エラーメッセージを表示するようコンポーネントに指示するため�? state を返します。

注意点

• static getDerivedStateFromError は純関数であるべきです。副作用（例えば、分析サービス�?呼び出し）を�?�行したい場合は、componentDidCatch も�?�装する必要があります。

static getDerivedStateFromProps(props, state)

static getDerivedStateFromProps を�?�義すると、React は初回�?マウントとそ�?後�?更新�?両方で、render を呼び出す直前にこれを呼び出します。state を更新するため�?オブジェクトを返すか、何も更新しない場合は null を返すようにします。

こ�?メソッドは、state が props �?経時的な変化に依存するという稀なユースケース�?ために存在します。例えば、こ�? Form コンポーネントは props である userID が変更されたときに state である email をリセットします。

class Form extends Component {
  state = {
    email: this.props.defaultEmail,
    prevUserID: this.props.userID
  };

  static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.userID !== state.prevUserID) {
      return {
        prevUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }

  // ...
}

こ�?パターンでは、（userID �?ような）props �?前回�?値を、（prevUserID �?ような）state に保持する必要があることに注意してください。

引数

• props: コンポーネントがレンダーしようとしている次�? props。
• state: コンポーネントがレンダーしようとしている次�? state。

返り値

static getDerivedStateFromProps は、state を更新するため�?オブジェクトを返すか、何も更新しない場合は null を返します。

注意点

• こ�?メソッドは、原因に関係なくすべて�?レンダーで発火します。UNSAFE_componentWillReceiveProps はこれとは異なり、親が再レンダーを引き起こしたとき�?み発火し、ローカル�? setState �?結果としては発火しません。

• こ�?メソッドはコンポーネント�?インスタンスにアクセスできません。お望みであれば、コンポーネント�? props と state に対する純関数をクラス�?�義�?外部に抽出することで、static getDerivedStateFromProps と他�?クラスメソッドと�?間でコードを再利用することができます。

使用法

クラスコンポーネントを�?�義する

React �?コンポーネントをクラスとして�?�義するには、組み込み�? Component クラスを継承し、render メソッドを�?�義します。

import { Component } from 'react';

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

React は、画面に何を表示するかを知るために、render メソッドを呼び出します。通常、そこからは JSX を返します。render メソッドは純関数である、つまり JSX �?計�?��?みを行う必要があります。

関数コンポーネントと同様に、クラスコンポーネントでも親コンポーネントから props を通じて情報を受け取ることができます。ただし、props を読み取るため�?構文は異なります。例えば、親コンポーネントが <Greeting name="Taylor" /> をレンダーする場合、こ�? name プロパティは this.props から this.props.name �?ようにして読み取ります。

フック（use で始まる useState �?ような関数）はクラスコンポーネント内ではサポートされていないことに注意してください。

クラスコンポーネントに state を追加する

クラスに state を追加するには、state というプロパティにオブジェクトを割り当てます。state を更新するには、this.setState を呼び出します。

クラスコンポーネントにライフサイクルメソッドを追加する

クラスにはいくつか�?特別なメソッドを�?�義することができます。

componentDidMount メソッドを�?�義すると、コンポーネントが画面に追加される（マウントされる）ときに React がそれを呼び出します。props や state �?変更によりコンポーネントが再レンダーされた後に、React は componentDidUpdate を呼び出します。コンポーネントが画面から削除される（アンマウントされる）際に、React は componentWillUnmount を呼び出します。

componentDidMount を�?�装する場合、通常はバグを避けるために 3 つすべて�?ライフサイクルを�?�装する必要があります。例えば、componentDidMount が何らか�? state や props を読み取る場合はそれらに変更があった場合に処理するために componentDidUpdate を�?�装する必要があり、componentDidMount が�?�行したことをクリーンアップするためには componentWillUnmount を�?�装する必要があります。

例えば、以下�? ChatRoom コンポーネントは、チャットへ�?接続を props および state と同期させています。

開発時に Strict Mode が有効�?場合、React は componentDidMount を呼び出し、直後に componentWillUnmount を呼び出し、そ�?後再び componentDidMount を呼び出します。これにより、componentWillUnmount �?�?�装を忘れた場合や、そ�?ロジックが componentDidMount �?挙動と正しく「鏡�?ように対応」していない場合に気づきやすくなります。

エラーバウンダリでレンダー中�?エラーをキャッチする

デフォルトでは、アプリケーションがレンダー中にエラーをスローすると、React はそ�? UI を画面から削除します。これを防ぐために、UI をエラーバウンダリにラップすることができます。エラーバウンダリは、クラッシュした部位�?代わりに、例えばエラーメッセージなど�?フォールバック UI を表示するため�?、特別なコンポーネントです。

エラーバウンダリコンポーネントを�?�装するためには、エラーに反応して state を更新し、ユーザにエラーメッセージを表示するため�? static getDerivedStateFromError を提供する必要があります。またオプションで、例えばエラーを分析サービスに記録するなど�?追加�?ロジックを追加するために componentDidCatch を�?�装することもできます。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

次に、コンポーネントツリー�?一部をこれでラップします。

<ErrorBoundary fallback={<p>Something went wrong</p>}>
  <Profile />
</ErrorBoundary>

もし Profile あるいはそ�?子コンポーネントがエラーをスローすると、ErrorBoundary はそ�?エラーを「キャッチ」し、指�?�したエラーメッセージとともにフォールバック UI を表示し、エラーレポートをあなた�?エラーレポーティングサービスに送信します。

すべて�?コンポーネントを別々�?エラーバウンダリでラップする必要はありません。エラーバウンダリ�?粒度について考える際は、エラーメッセージをどこに表示する�?が理にかなっているかを考えてみてください。例えば、メッセージングアプリでは、会話�?リストをエラーバウンダリで囲む�?が理にかなっています。また、メッセージを個別に囲むことも理にかなっているでしょう。しかし、アバターを 1 つずつ囲むことには意味がありません。

代替案

シンプルなコンポーネントをクラスから関数へ移行

一般的にはコンポーネントは関数として�?�義します。

例えば、こ�? Greeting クラスコンポーネントを関数に書き換えたいとします。

Greeting という関数を�?�義してください。ここに render 関数�?本体を移動します。

function Greeting() {
  // ... move the code from the render method here ...
}

this.props.name とする代わりに、props である name は分割代入構文を使用して�?�義し、直接読み取ります：

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

�?�全な例は以下�?通りです。

state を持つコンポーネントをクラスから関数へ移行

こ�? Counter クラスコンポーネントを関数に書き換えたいとします。

まず、必要となる state 変数 を持った関数を�?�言します。

import { useState } from 'react';

function Counter() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);
  // ...

次に、イベントハンドラを書き換えます。

function Counter() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  function handleNameChange(e) {
    setName(e.target.value);
  }

  function handleAgeChange() {
    setAge(age + 1);
  }
  // ...

最後に、this で始まる値へ�?参照をすべて、コンポーネントで�?�義した変数と関数に�?き換えます。例えば、this.state.age を age に、this.handleNameChange を handleNameChange に�?き換えます。

�?�全に書き換えられたコンポーネントはこちらです。

ライフサイクルメソッドを持つコンポーネントをクラスから関数へ移行

ライフサイクルメソッドを持つ以下�? ChatRoom クラスコンポーネントを関数に書き換えたいとします。

まずは componentWillUnmount が componentDidMount �?逆�?動作をしていることを確認してください。上記�?例では componentDidMount によって確立された接続を切断している�?で、そうなっています。そ�?ようなロジックが存在しない場合、まずそれを追加してください。

次に、componentDidUpdate メソッドが、componentDidMount で使用している props と state �?変更を処理していることを確認してください。上記�?例では、componentDidMount は setupConnection を呼び出しており、それが this.state.serverUrl と this.props.roomId を読み取っています。したがって componentDidUpdate も this.state.serverUrl と this.props.roomId が変更されたかどうかを確認し、変更があった場合は接続を再確立しなければなりません。componentDidUpdate �?ロジックが存在しない、あるいは関連するすべて�? props と state �?変更を処理できていない場合は、まずそれを�?正してください。

上記�?例では、ライフサイクルメソッド内�?ロジックは、React �?外部�?システム（チャットサーバ）にコンポーネントを接続しています。コンポーネントを外部システムに接続するためには、こ�?ロジックを単一�?エフェクトとして記述します。

import { useState, useEffect } from 'react';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);

  // ...
}

こ�? useEffect �?呼び出しは、上記�?ライフサイクルメソッド内�?ロジックと同等です。ライフサイクルメソッドが複数�?互いに関連しないことを行っている場合は、それらを複数�?独立したエフェクトに分割してください。以下に�?�全な例を示します。

コンテクストを持つコンポーネントをクラスから関数へ移行

以下�?例では、クラスコンポーネントである Panel と Button が、this.context からコンテクストを読み取っています。

これらを関数コンポーネントに変換する場合、this.context を useContext �?呼び出しに�?き換えます。