こんにちは。 AG-Boost事業本部の大塚です。 最近、自社ツールのもっさり感を解消するためパフォーマンス改善を行いました。 フロントでは、キャッシュ化による不要な再計算・再レンダリングを抑えることが重要です。 この記事では、メモ化で頻出のReact.memo, useMemo, useCallback等について、使い方と使い所をまとめてみました。 先月遊んでいたTypescriptの型パズルに倣って いくつか問題を用意したので、パズル感覚でお楽しみいただければと思います。 1. 基礎知識 1-1. レンダリングとは レンダリングとは、以下の2stepで画面を描画することである。 1, co…