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でコンポーネントの再描画を最適化する方法についての紹介でした。