Reactで再描画を抑える方法まとめ

この記事について 以下でReactの再描画の仕組みと抑制方法をスクラップしました。 折角なので、記事にしてまとめておきます。 再描画の確認方法 Chromeデベロッパーツールを使用すると、いつ再描画が行われているか確認することができます。 該当箇所の外枠が発光し、再描画されていることを教えてくれます。また、負荷がかかるほど外枠が黄色に近い色に変わっていきます。 再描画の基本 React Hooksではコンポーネント内で定義されているStateが更新されたとき、そのコンポーネントの再描画が行われます。 そのコンポーネントがいくつかの子コンポーネントを持つとき、それら全てが再描画の対象となります。 Inputコンポーネント 以降で使用しているInputコンポーネントです。 基本的にはinputタグをラップしているだけなので、読み進める分には飛ばしてOKです。 Input.tsx export

[umai_bow]

deafultValue……

[remonoil]

useXxxの違いがめっちゃわかりやすい！

[yarumato]

“再描画の確認方法：ChromeDevtool。再描画の基本：React HooksでStateが更新されたとき。素直にuseStatを使うと入力のたびに全て再描画。コンポーネントをメモ化。useCallbackで関数の再定義を抑制。全ての再描画を抑えるuseRef”

[carolina04]

Chromeデベロッパーツールを使用すると、いつ再描画が行われているか確認することができます。 該当箇所の外枠が発光し、再描画されていることを教えてくれます。また、負荷がかかるほど外枠が黄色に近い色に変わって