🦏
React 再レンダリングの最適化
作成日:
2021/07/17
0
再レンダリングが起きる条件
- stateが変更されたとき
- propsが変更されたとき
- 親コンポーネントがレンダリングされたとき
無駄なレンダリングをしないためには
- memo:propsが変更されていなければ、親コンポーネントが再レンダリングされても、memoを書いた子コンポーネントは再レンダリングされなくなる
- useCallback:コンポーネント内で定義した関数は、レンダリングのたびに作り直される(中身が変わらなくても)。
このため親コンポーネントが再レンダリングされると、propsで関数を受け取っている子コンポーネントも再レンダリングされてしまう(memoを書いていても同じ)
useCallbackを使えば、useEffectのように関数を作り直すタイミングを指定できるため、子コンポーネントの再レンダリングを減らすことができる
2021年1月からプログラミングの勉強開始。
主にJavaScript, Rubyについてメモ
を残していきたい。