14に上げるか？
　Amplifyが対応していない
　Server Action使う前提で開発してきた
→ECS上でもデプロイできるので、14に上げた！

• useMemo: useMemoで囲まれた処理はレンダリング時に再計算をスキップする。依存配列に含まれた変数が変更されている場合のみ再計算する。
• useCallback: useMemoとほぼ同じ。レンダリング時に関数の生成をスキップする。依存配列に含まれた変数が変更されている場合のみ再計算する。
• memo: コンポーネントを囲む。useMemoのコンポーネント版みたいな感じ。props全てに変更がなければ再レンダリングをスキップする。（再レンダリングを防ぐためにはこれが使える）
  • 注意点としてシャローコピーである点が挙げられる。https://stackoverflow.com/questions/59280319/react-memo-rerendering-with-the-same-props

他にも方法としては以下があります。

• useEffectの排除（useEffectは全ての計算の最後に行われる。したがってuseEffectでstateを更新した場合、全ての計算がもう一度行われ、めちゃくちゃ高価なコストになる）
• コンポーネントを細く区切る（自身に関係ないpropsを持たせないことで再レンダリングを防げる）
• Contextの依存を最小限にする（Contextの値を変更したとき、Contextを使用するコンポーネントは全て再レンダリングされるため）

僕の知ってる範囲だとこんな感じですかね〜

ぶっちゃけ関数に関しては脳死でuseCallbackを使ったらいいかと。レンダリングごとに計算するより大体早くなります
useMemoは脳死でやるならプリミティブ以外に使ったらいいかなと。プリミティブのうち計算量が多いものなら囲むと早くなると思います。感覚でやるのは良くないので、プリミティブの計算については問題が起きてからちゃんと検証して実装でいいと思います。
親のコンポーネントの再レンダリングが多く、子コンポーネントは再レンダリングが不要な場合、無駄に子コンポーネントの再レンダリングが走るのでmemoで囲んであげると効果的です。

ありがとうございます

実際に動かしたときに、メモしてもしなくても、体感で遅さが目立たない場合ってどう選択しますかね？

この判断が結構悩んでるんですよね。
なので、画面のテストで、高い負荷をかけるしかないのかぁと思ったりしてます

ぶっちゃけスルーでいいと思います。気になるコードがあればchromeのCPUスロットルで性能を下げて見る事ができます。（一番上のno throttlingの部分）

もしくは時間の計測もいいかと思います。https://react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive

あとは一昨日slackで書いたようにwhy did you renderを使えば無駄なレンダリングが見れるのでしらみ潰しに無駄を排除するとかですかね〜https://github.com/welldone-software/why-did-you-render

AIが生成したロゴの肖像権ってどうなる？