Slide 1

Slide 1 text

Reactの再レンダリングを理解する Understanding React Re-rendering

Slide 2

Slide 2 text

Reactには2種類のレンダリングがある 初回レンダリング E コンポーネントが最初に画面に表示されるタイミングで発生 再レンダリング E 既に表示されているコンポーネントが更新されたタイミングで発v E 今回のLTで話したいテーマはこちら

Slide 3

Slide 3 text

Component1 の count が更新された時に 再レンダリングされるコンポーネントはどれ Á ComponentÅ Á Component Á Component3 再レンダリングに関するクイズ

Slide 4

Slide 4 text

Component1 の count が更新された時に 再レンダリングされるコンポーネントはどれ Á ComponentÅ Á Component Á Component3 正解: 全部 親コンポーネントの state が更新されると 親コンポーネント以下は全て再レンダリングされる 再レンダリングに関するクイズ

Slide 5

Slide 5 text

state 管理を子コンポーネントで行うことで 再レンダリングの範囲を最小限にできる state管理はなるべく子コンポーネントで行う

Slide 6

Slide 6 text

memo 化したコンポーネントは props の値が 変わらない限りは前回の描画結果をキャッシュする memo化で再描画を抑えることも可能

Slide 7

Slide 7 text

useStat9 6 主に狭い範囲のスコープでの state 管理に使& 6 親、子、孫コンポーネント間の値の受け渡しで props リレーが発生しがÇ 6 props リレーをしたコンポーネント配下全てで再描画が発生 useContex… 6 同一画面内での state 管理など広い範囲のスコープでの state 管理に使& 6 useContext で state を取得できるため props リレーが不h 6 stateが更新された際に context 配下全てで再レンダリングされる点は useState と同じ Redux、Recoilなどのライブラリを使Ô 6 アプリケーション全体の state 管理や useContext の代替として使& 6 React の管理外で state 管理を行い、孫コンポーネントが直接 state を取得できるため props リレーが不h 6 再レンダリングが発生するのは state を取得したコンポーネント配下のみ その他のstate管理を紹介

Slide 8

Slide 8 text

再レンダリングを理解して アプリケーションを高速化しよう