Reactの関数コンポーネントとHooks #2 - Qiita

Part1の続きです。 メモ化フック 同じ結果を返す処理に関しては初回のみ処理を実行しておき、2回目以降は前回の処理結果を呼び出すことで毎回同じ処理を実行させない。 プログラミングではメモ化と呼ばれる高速化テクニックのひとつです。 これをReact Hooks上で簡単に利用できるのがmemo、useMemo、useCallbackです。パフォーマンス向上のために使用します。（必要のない再レンダリング、再計算を抑制する為なので、使わなくても動作はします。） コンポーネントのメモ化 そもそも再レンダリングが発生するタイミング： (1) propsや内部状態が更新された時 (2) 親コンポーネントが再レンダリングされた時 (3) コンポーネント内で参照してるContextの値が更新された時 特に問題なのは(2)で、親コンポーネントが再レンダリングされると無条件に子コンポーネントでも再レンダリング