技術推進室の色川です。 ここ一年くらいランキングシェアというキュレーションメディアのフロントエンドを担当しています。その記事作成画面をReactで実装しており、先日アイテムの移動をDrag&Dropで行えるようにしたのですが、動きはガクガク、ブラウザは途中で固まる、という有様で、パフォーマンスチューニングを余儀なくされたのでその内容を紹介します。 [ランキングシェアの記事作成画面] ※画面は開発中のものです。(動画にしたら?との意見があったのですが、Windowsで画面を録画する方法が分からず…) Reactのパフォーマンス改善の基本Reactはコンポーネントをツリーとして管理していて、あるコンポーネントの更新が必要になるとそのコンポーネントをルートとするサブツリー全体を更新します。 引用元:Reactive, Component-based UIs with React | Consta
![Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/cc032affa4d89fb601b9517907137fc272940323/height=288;version=1;width=512/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Ftech-blog%2Freact-perf-tuning%2Fdnd.png)