ほぼuseCallbackと同じ役割です。主に参照を返すような値をいくつも作らないようにする為に使います。
useMemoには1つ目の引数に好きな値、2つ目にはuseCallbackなどと同じ用に条件を渡します。この条件がセットで同じ値の時は前回返した値を返します。
以下は例です。
const obj = useMemo(
{foo, bar, baz},
[foo, bar, baz]
);例えば、
foo === 1bar === 2baz === 3
な時objは{foo: 1, bar: 2, baz: 3}というオブジェクトを返します。次に同じ条件のセットで再度実行されるとobj前回返した{foo: 1, bar: 2, baz: 3}をそのまま返します。もし違う条件のセットであれば新しいオブジェクトを作って返します。
依存無しの値
もし値が外部のどんな変数にも依存してない場合、明らかに生成が必要な値は1つになります。明らかに1つの時は条件に空配列を置きます。
useMemo(
{ /* ... */ },
[]
);これで常に{ /* ... */ } === { /* ... */ }な値が返ります。
依存無しなのにわざわざuseMemoを使う必要があるのかとも思うかもしれません。これは必要あります。でなければ、子コンポーネントに渡すときに違う参照の値を渡すことになり、子コンポーネントから見れば毎回違うセットのpropsが渡ってくるように見える為です。
