Reactでコンポーネントの再描画を最適化する方法

Reactは、仮想DOMによってコンポーネントの再描画を最適化することができますが、それでも無駄な再描画が起こってしまうことがあります。本記事では、そういった無駄な再描画を減らす方法について紹介します。

shouldComponentUpdateメソッドを実装する

Reactのコンポーネントは、propsやstateが変更されたときに再描画されますが、shouldComponentUpdateメソッドを実装することで、再描画を抑制することができます。shouldComponentUpdateメソッドは、次に描画されるコンポーネントが前回の描画と同じであればfalseを、異なればtrueを返すように実装します。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.someProp === nextProps.someProp &&
        this.state.someState === nextState.someState) {
      return false;
    }
    return true;
  }

  // ...
}

PureComponentを使う

shouldComponentUpdateメソッドは、毎回実装する必要があるため、手間がかかります。そこで、ReactにはshouldComponentUpdateメソッドを自動的に実装してくれるPureComponentが用意されています。PureComponentは、propsやstateの変更を浅く比較するため、shouldComponentUpdateメソッドを自動的に実装することができます。

class MyComponent extends React.PureComponent {
  // ...
}

React.memoを使う

React.memoは、関数コンポーネントをラップして、そのコンポーネントのpropsが変更された場合にのみ再描画するようにします。クラスコンポーネントのshouldComponentUpdateメソッドと同様の役割を果たすことができます。

const MyComponent = React.memo(function(props) {
  // ...
});

プロパティの分割代入を使う

コンポーネントがpropsを受け取った場合、propsの一部の値だけを使う場合があります。その場合、propsのすべての値が変更されたときに再描画されてしまうため、不要な再描画を避けるために、プロパティの分割代入を使うことができます。

function MyComponent({ someProp }) {
  // ...
}

結論

Reactは、仮想DOMによってコン
ポーネントの再描画を最適化していますが、それでも無駄な再描画が起こることがあります。そういった無駄な再描画を減らす方法として、shouldComponentUpdateメソッドの実装、PureComponentの利用、React.memoの利用、プロパティの分割代入の利用があります。適切にこれらを使うことで、パフォーマンスの向上が期待できます。

以上が、Reactでコンポーネントの再描画を最適化する方法についての紹介でした。