Reactの再レンダリングの最適化

Reactの再レンダリングとは？

React は変化があった要素と以前にレンダリングされた要素を比較することで、実際の DOM の更新が必要かを判断します。それらが等しくない場合、React は DOM を更新します Reactの再レンダリング

Reactが再レンダリングするタイミングとは？

Reactが再レンダリングするタイミング • stateが更新された時  • propsが更新された時  • 親コンポーネントが再レンダリングされた時 

stateが更新された時 inputで毎回1文字入力される度に、 stateが更新されるため、再レンダリングが行われる

propsが更新された時 count upボタンを押下する度に、 propsが変更され再レンダリングされる

親コンポーネントが再レンダリングされた時親コンポーネントが再レンダリングされているタイミングで子コンポーネントも再レンダリングされている

再レンダリングを最適化する方法 1. React.memo 2. useCallback 3. useMemo

コンポーネントのメモ化 Propsに変更がない限り、メモ化したコンポーネントでは再レンダリングされないようになっている React.memo メモ化・・・キャッシュみたいなもの。毎回、同じものを読み込ませないようにする。 https://yukimasablog.com/memoization

React.memo

関数のメモ化 React.memoでメモ化したコンポーネントにuseCallbackでメモ化した関数を Props として渡すことで、コンポーネントの不要な再レンダリングをスキップすることができる。 useCallback

useCallback 構文：useCallback(関数の処理, 依存配列)　 ※第2引数の引数の値が変化すると、関数が再生成され再レンダリングが起こる。つまり第 2引数の値が変わらない限り、propsを渡している子コンポーネントは再レンダリングされない。

値（変数）のメモ化関数によってメモ化された値を返す useMemo

useMemo 構文：useMemo(関数の処理, 依存配列)　 ※第2引数の引数の値が変化すると、関数が再生成され再レンダリングが起こる。つまり第 2引数の値が変わらない限り、関数は再度読み込まれない。 1回しか関数を読み込ませない場合は、空の配列を設定する

ライブコーディングやってみよう！

まとめ • React.memo  →　Propsに変更がない限り、メモ化したコンポーネントでは再レンダリングされない  • useCallback  →　React.memoでメモ化したコンポーネントにuseCallbackでメモ化した関数を Props として渡すことで、コンポーネントの不要な再レンダリングをスキップ 
• useMemo  →　関数によってメモ化された値を返す。値が変わらない場合は、再レンダリングされない 

Reactの再レンダリングの最適化

Reactの再レンダリングの最適化

horisan

Other Decks in Programming

Featured

Transcript