useMemo

こんにちは！ 株式会社iimonでエンジニアをしている遠藤です。 最近業務でReactを触るので、再レンダリングについて勉強したことをアウトプットしようと思い記事にしました。 ハンズオンで挙動を試したい場合はcodeSandboxでNew sandbox > React Typescriptを選択して、コードをコピペしていただければ、挙動を試せるかと思います。 ※ デフォルトで開発環境はStrictModeになっているので、1回の更新につき2回再レンダリングされます。 ※ 記事ではレンダリング回数をわかりやすくするために、StrictModeにはせずに実行しています。 参考: https://…

こんにちは！ スマレジ テックファームのMichiです！ 前週に引き続き、Reactのキャッチアップをしていきます。今回は、『レンダリングの最適化』について学びます。 コンポーネントが再レンダリングされる条件 サンプルコード memo - コンポーネントのメモ化 - useCallBack - 関数のメモ化 - useMemo - 変数のメモ化 - まとめ コンポーネントが再レンダリングされる条件 前回のおさらいです。Reactにおいて、コンポーネントの再レンダリングが発生する条件は、（大まかに言って）以下の三つでした。 コンポーネント内の状態管理されている値（state）が変更されたとき 親…

はじめに はじめまして。株式会社スタメンでエンジニアをしております永井です。 今回の記事ではReactでメモ化によるパフォーマンスを意識した実装方法について書きたいと思います。 なぜパフォーマンスを意識した実装が大切なのでしょうか。 なぜなら、ユーザーのある操作に対するレスポンスの速度を高めることは、UXの文脈において非常に重要な要素だからです。例えば、100ms未満のレスポンスに関してはユーザーは瞬時に感じられますが、100ms ~ 300msではすでに遅いと感じてしまいます。遅いことにストレスを感じたユーザーは、別のサービスにリプレイスしてしまうかもしれません。 Reactでパフォーマンス…