頻繁に行われるレンダリングを抑え、コンポーネントの不要なレンダリングを防ぐことでパフォーマンス向上させるuseMemoized(関数の結果を保持する)やuseCallback(関数自体をメモ化)を使うのをお勧めします。
stateが更新される度に再レンダリングされるが、更新前との変更に差がなければ高頻度に行われる再レンダリングを安全にスキップできます。
メモ化とは
同じ結果を返す処理について初回のみ処理を実行→記録しておき、値が必要になったら２回目以降は前回の処理結果を計算することなく呼び出し、値を得られるようにすること。
メモ化によって都度計算する必要がなくなるのでパフォーマンスの最適化が期待できます。
繰り返し同じ結果を呼び出すことで同じ処理の繰り返しを避けることができるのがuseMemoizedの特徴です。
final memo = useMemoized(() => 値を計算する関数の呼び出し, [値の計算に必要な要素の配列]);
第２引数に空の依存配列(値の計算に必要な要素の配列)を渡した場合
初回の１度のみ実行され２度目以降のレンダリング時にはキャッシュ(関数を実行した結果の値)から値を取得します。
final memo = useMemoized(() => memoFuncsion(num1 + num2), []);
第２引数に空の依存配列を渡した場合、初回の計算結果を保持し続けます。イメージとしては初回の計算結果を使い回す感じです。
第２引数の依存配列が空でない場合や、要素の値に変更があった場合
memoFuncsionの計算に必要な要素(num1またはnum2のいずれか)に変更があった場合にのみ値が再計算されます。
final memo = useMemoized(() => memoFuncsion(num1 + num2), [num1, num2]);