😆

【React】コンポーネントのmemo化

1 min read

再レンダリングのタイミングと対象

  1. stateが更新されたコンポーネント
  2. propsに変更のあったコンポーネント
  3. 再レンダリングされたコンポーネントの配下コンポーネント
    ※organismsが再レンダリングされるとmolecules・atomsも再レンダリングされる。

再レンダリングの抑制

今回取り上げる再レンダリングは3つ目。
親のstateが更新された際に、子コンポーネントの再レンダリングはmemoを使って回避できる。

// memoの引数に関数コンポーネントを丸ごと入れる
// 例
import {memo} from "react"
const test = memo( ({text}) => { 
  return <h1>{text}</h1>
 } )

memoを付けたコンポーネントはpropsに変化が無い限り再描画されない。
※上記の例だとtextに変化がない限り再レンダリングは起きない。

Discussion

ログインするとコメントできます