【React】無駄な再レンダリングをさせない、レンダリングの最適化

React

Reactで開発をする上では、どのような条件でレンダリングがされるかを把握しておき、より軽いアプリに仕上げる必要がある。

そのために必要な知識として、再レンダリングについてまとめました。

再レンダリングが起きるタイミング

  • コンポーネントのstateが更新されたとき
  • 親コンポーネントが受け取るpropsが変更されとき
  • 再レンダリングされたコンポーネントの配下の子コンポーネント

最適化の方法

再レンダリングが必要以上に起きるのを防ぐための方法として、コンポーネントのmemo化、関数のmemo化といった方法がある。

memo機能を使う

memoでできること

親コンポーネントが更新されても子コンポーネントに変更が無い限り、子コンポーネントは再レンダリングされないようにできる。

記述方法

子コンポーネントで以下を処理を行う。

  • memoをimport
  • memoでコンポーネントを囲う

これで子コンポーネントは親コンポーネントの影響を受けないことになった。

import { memo } from "react";

export const ChildArea = memo((props) => {
  const { open } = props;
  return (
    <>
      <div>
        <p>子コンポーネント</p>
      </div>
    </>
  );
});

useCallback

memo化した中にアロー関数を追加すると、propsとしては、毎回違う関数という判断となるため、子コンポーネントが毎回更新されてしまうという問題が起きる。

これを解決するために、処理が変わらない場合は同じものを使い回すという処理をしてあげる必要があり、useCallbackという機能を使う。

useCallbackをimport

import { useState, useCallback } from "react";

アロー関数をuseCallbackで囲う

第二引数には、見張る値を指定する。

この値は、ここの値が変わったときに関数を実行するというもの。

const onClickClose = () => setOpen(false);

↓

const onClickClose = useCallback(() => setOpen(false), []);

以上、SPAアプリにおける、再レンダリングの必要な知識についてでした!

コメント

タイトルとURLをコピーしました