アプリのパフォーマンス改善でライブラリの実装の理解が役立った話

はじめに 技術で開発上の問題を突破できると嬉しいですよね。 しかもバックエンドで学んだことがフロントエンドで活用できると面白いですよね。 そこでGraphQLサーバーの開発でDataLoaderの実装を勉強したことが、フロントエンドのパフォーマンス改善で役に立った話を紹介します。[1] （DataLoaderを知らなくても読めるようにこの記事は書いています！！！） パフォーマンス問題 ReactでExcelのようなテーブルを持ったアプリを開発していました。 アプリには変更のあった行の色が変わる機能がありました。 画面の雰囲気: ある日、データ件数が大きいときにペーストを行うと非常に時間がかかるという問題が発覚しました。 1000件でコピペしたときの様子: 原因をChromeの開発者ツールで調査したところ、ペースト時にセルごとに呼び出されているonChangeの処理が重すぎることがわかりまし