はてなブックマーク

みなさん、こんにちは。ウイングアーク１ｓｔの いしま です。 React・TypeScript のアプリ開発で描画が遅い問題があり、この問題について、React Developer Tools の Profiler を利用して改善した内容をご紹介します。 ※当記事はReact・TypeScriptの開発経験があり、Chromeの開発者ツールや拡張機能の操作できる前提の内容になっています。 ※React Developer Tools は、Chromeの拡張機能で、Reactのアプリケーションの各コンポーネントの描画状況を確認できるツールです。 React Developer Tools 当記事では、実際に行ったパフォーマンス改善作業を例として、改善にいたるまでの流れを目次としています。 １．描画が遅いケースを特定するアプリケーションが遅い要因として、描画以外の問題がないことを確認できている