前置き
こんにちは
今回が初投稿につき、記事が読みにくい等ございますがご容赦ください。
本記事では、useStateとuseMemoの違いについて自分なりにまとめました。
useEffectとは
useEffect は、公式サイトによると「コンポーネントを外部システムと同期させるための React フック」であり、外部システムと同期する必要がない場合、エフェクトはおそらく不要との記載の通り、主に外部システムとの同期以外に使われることのないものです。
つまり一般的な状態の変化に基づくコールバック関数としてuseEffectはuseMemoのほうが適切な用途の場合もあります。
useMemoとは
useMemoとは公式サイトによると「レンダー間で計算結果をキャッシュするための React フック」であり、計算が著しく遅く、かつ、その依存値がほとんど変化しない場合や計算結果が同一の場合のレンダーを防ぐ(描画系のアプリケーションにおいて有用と思われる)ことができます。要するにレンダーの回数を減らすためのものですね。useMemoを使用しない場合、計算をするたびに画面が更新されてしまうと大きくパフォーマンスに影響がでてしまいます。
Reactを学び始めのころはuseEffectを頻繁に使用していましたが、useMemoで代替できる箇所も多く、むしろパフォーマンスを考慮するとuseMemoのほうが良いことも多かったです。Reactのhooksを適切に学ぶことはかなり大切だと思われます。
そもそも...
Reactの基本設計としてそもそも状態は頻繁に更新されるべきではなく、できる限り減らしたほうが良いパフォーマンスをだせるそうなので、以下に状態を減らす方法について僕なりの知見を記載していこうと思います。
- 頻繁に更新されることの多い箇所をコンポーネントととして切り出す
- 重たい計算はバックエンドで行う(APIとして実装する)
- 複数箇所での状態の共有はuseContextなどを用いて行う
- APIで取得されるデータはuseSWRを用いてキャッシュを適切に管理する
プロジェクトの設計をしっかり行いどの状態をどこで管理するのかを最初に適切に定めるとよりよいプロジェクトになると思います。