React.memo / useMemo / useCallback / Redux reselect の差分表

React.memo / useMemo / useCallback / Redux reselect の違いを表にまとめました。
どれもメモ化する(計算結果を再利用する)という意味では似ていますが、ここでは入力は何か、出力は何か(何をメモ化するのか)、いつ再計算するのかという視点でまとめます。

差分表

	入力	出力	いつ再計算するか
React.memo	component	メモ化された component	component への props が変化したとき1
useMemo(factory: () => T, deps: DependencyList | undefined): T	引数を持たない関数と依存リスト	関数の計算結果:T	依存リストのいずれかが変化したとき
useCallback(callback: T, deps: DependencyList): T	任意の関数と依存リスト	与えられた関数	依存リストのいずれかが変化したとき2
reselect: createSelector(...inputSelectors | [inputSelectors], resultFunc)	stateを入力とする関数群 inputSelectors と inputSelectorsの結果を入力とする関数resultFunc	resultFuncの計算結果	inputSelectorsのいずれかの結果が変化したとき3

参考にしたページ

React の最上位 API – React
フック API リファレンス
reduxjs/reselect: Selector library for Redux
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする

1. React.memoによりメモ化された componentは、propsが変化しなければ再レンダリングされませんが、propsに inline callbackが含まれると、propsが変化するため再レンダリングされます。これを防ぐために、useCallbackにより callbackをメモ化することができます。 ↩

2. useCallback(fn, deps) は useMemo(() => fn, deps)と等価です。 ↩

3. Redux useSelect(selector: Function, equalityFn?: Function) では state が変化したとき、selector関数の計算が常に発生します。selectorの計算コストが高いときには reselect を使用することで、依存する stateの一部が変化したときにだけ再計算が発生するようメモ化できます。 ↩