0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[初学者 - 備忘録] Reactのパフォーマンス最適化

Last updated at Posted at 2024-07-27

再レンダリングを防ぐことでパフォーマンスを向上する方法(関数)についての備忘録

React.memo()

コンポーネントの再レンダリングを防ぐための高階コンポーネント。
受け取ったpropsの値が同じであれば再レンダリングをスキップする機能がある。
propsの変更を判定し、変更があった場合のみ再レンダリングをする。
Frame 45 (4).png

usecCallback()

関数をメモ化(キャッシュ)するためのフック。
コンポーネント内で定義した関数をメモして再利用し、レンダリングのたびに生成されることを防ぐ。
子コンポーネントに関数を渡している場合に、不要のレンダリングを防ぐことができる。
イベントハンドラーを毎回新しく作らないようにできる。

useMemo()

値をメモ化するためのフック。
コンポーネントだけではなく値をメモすることが可能。コストの高い処理などをメモ化する。
useMemo自体の実行にもコストがかかるため、重い処理にのみ使用する。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?