🦏 React 再レンダリングの最適化
作成日: 2021/07/17
0

再レンダリングが起きる条件

  • stateが変更されたとき
  • propsが変更されたとき
  • 親コンポーネントがレンダリングされたとき

無駄なレンダリングをしないためには

  • memo:propsが変更されていなければ、親コンポーネントが再レンダリングされても、memoを書いた子コンポーネントは再レンダリングされなくなる
  • useCallback:コンポーネント内で定義した関数は、レンダリングのたびに作り直される(中身が変わらなくても)。
    このため親コンポーネントが再レンダリングされると、propsで関数を受け取っている子コンポーネントも再レンダリングされてしまう(memoを書いていても同じ)
    useCallbackを使えば、useEffectのように関数を作り直すタイミングを指定できるため、子コンポーネントの再レンダリングを減らすことができる

2021年1月からプログラミングの勉強開始。 主にJavaScript, Rubyについてメモ を残していきたい。