みなさん、おはようございます
！
@f0lstです！
この記事はAteam LifeDesign Advent Calendar 2023 の 15日目の記事になります 
はじめに
全国47都道府県のReactを学ぶ紳士淑女の皆さん！
毎日、自己研鑽おつかれさまです 
やあああ、スキルアップって楽しいですね 
(唐突)
あなたが知らないかもしれないReactのホント
「あなたが知らないかもしれないReactのホント」とは大きく出てしまいました 
紹介させていただくのは、公式ドキュメントからの抜粋です。
詳しくみたい方は是非公式も見に行ってください 
記念すべき第一回はメモ化についてお話ししていきます 
そのメモ化って本当に必要？
皆さん、memoやuseMemoなどは活用していますか？
memoは、propsが変更されていない場合レンダーをスキップしてくれます。
useMemoは、計算結果をキャッシュしてくれますね。
どちらも有用で、パフォーマンス向上には必要なことです。
...
...
...
果たして、本当にそうでしょうか？
大抵の場合はメモ化は不要である
ここでReactの公式ドキュメントを見てみましょう 
以下はドキュメントからの引用です 
あなたのアプリがこのサイトのように、ほとんどのインタラクションが大まかなもの（ページ全体やセクション全体の置き換えなど）である場合、メモ化は通常不要です。
一方、あなたのアプリが描画エディタのようなもので、ほとんどのインタラクションが細かなもの（図形を移動させるなど）である場合、メモ化は非常に役に立つでしょう。
memo – React
と記載があります。
つまりは、インタラクションの細かい描画エディタのようなものでない限り、メモ化は不要と言うことですね 
なんでもかんでもメモ化するんじゃないぞ
また、こんな記載もあります
個別のケースを考えずに、可能な限りすべてをメモ化するようにしているチームもあります。
このアプローチのデメリットは、コードが読みにくくなることです。
memo – React
メリットがないどころか、コードの可読性を下げることにも繋がると言うことですね 
良かれと思って実装したメモ化も、メリットがなく、可読性も下がってしまっては本末転倒です！
じゃあ、どうすればええん！？
「じゃあ、何もしなくっていっか〜 
」となってはいけません
公式ドキュメントでは、メモ化を使わず、パフォーマンスを向上する手段も提供されています！
メモ化を不要にする5つの手段
公式ドキュメントでは、メモ化を不要にする5つの手段が紹介されています。
では、一つずつ手段を見ていきましょう〜 
1. 子コンポーネントをchildrenとして受け入れる 
まず1つ目は、「子コンポーネントをchildrenとして受け入れる」です。
以下はドキュメントからの引用です
コンポーネントが他のコンポーネントを視覚的にラップするときは、それが子としてJSXを受け入れるようにします。
これにより、ラッパコンポーネントが自身のstateを更新しても、Reactはその子を再レンダーする必要がないことを認識します。
ちょっとこの説明はわかりづらいですね 
実際のコードを見て確認しましょ〜！
コード例
以下のコードは3つのコンポーネントで構成されています。
const ChildComponent = () => {
{/* 単なるテキストを持つ */}
return <p>これはChildComponentです</p>;
};
const ParentComponent = ({ children }: Props) => {
{/* `ChildComponent`を`children`として受け取っている */}
{/* `count`のstateを持つ */}
{/* `count`のstateを更新する`<button>`を持つ */}
const [count, setCount] = useState(0);
return (
<div>
{children}
<p>{count}</p>
<button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
</div>
);
};
const SampleComponent = () => {
{/* `ParentComponent`と`ChildComponent`を持つ */}
return (
<ParentComponent>
<ChildComponent />
</ParentComponent>
);
}
では、再レンダリングの観点からこのコードを見ていきましょう 
注目すべきは、ParentComponentでcountのstateが更新された時です。
流れは以下です
-
<button>がクリックされる -
onclickに指定されたsetCount((prev) => prev + 1)が呼ばれる - セッター関数が呼ばれたことで
countを使うParentComponentが再レンダリングされる
では、ParentComponentが再レンダリングされたタイミングで、ChildComponentはどうなるでしょうか？
普通に考えれば、親であるParentComponentが再レンダリングされているため、同じタイミングで子コンポーネントであるChildComponentも再レンダリングされると考えるかもしれません。
が、この場合は、ChildComponentは再レンダリングされません 
これが、引用で言われていた以下の部分です
コンポーネントが他のコンポーネントを視覚的にラップするときは、それが子としてJSXを受け入れるようにします。
これにより、ラッパコンポーネントが自身のstateを更新しても、Reactはその子を再レンダーする必要がないことを認識します。
つまり、ParentComponentがChildComponentをJSXとして受け取っているため、ラッパーコンポーネントであるParentComponentでstateが更新されても、子コンポーネントであるChildComponentを再レンダリングしないということですね
使える場面はある程度限定されますが、Appの上位に近いコンポーネントでは有効活用できるテクニックだと思います！
ぜひ、頭の片隅に置いて開発を行っていきましょう 
2. stateを必要以上にリフトアップしない
2つ目は、「必要以上にstateをリフトアップしない」です。
同じくドキュメントからの引用です
ローカルstateを優先し、必要以上に state のリフトアップを行わないようにします。
フォームや、アイテムがホバーされているかどうか、といった頻繁に変化するstateは、ツリーのトップやグローバルの状態ライブラリに保持しないでください。
stateを必要以上にリフトアップしないことで、stateが更新された時の再レンダリングを最低限にすることができます
極力、stateは使うコンポーネント内、もしくは親コンポーネントで定義する場合でも、必要以上に上位のコンポーネントで定義しないようにしましょう！
3. バグの回避のためにメモ化をしない 
3つ目は、「バグの回避のためにメモ化をしない」です。
同じくドキュメントからの引用です
レンダーロジックを純粋に保ちます。
コンポーネントの再レンダーが問題を引き起こしたり、何らかの目に見える視覚的な結果を生じたりする場合、それはあなたのコンポーネントのバグです！
メモ化を追加するのではなく、バグを修正します。
要するに、メモ化することでバグを回避するんじゃねぇよってことですね
正論すぎて、ぐうの音も出ませんね
みなさん気をつけましょう
4. stateを更新する不要なエフェクトを避ける
4つ目は、「stateを更新する不要なエフェクトを避ける」です。
同じくドキュメントからの引用です
stateを更新する不要なエフェクトを避けてください。
Reactアプリケーションのパフォーマンス問題の大部分は、エフェクト内での連鎖的なstate更新によってコンポーネントのレンダーが何度も引き起こされるために生じます。
エフェクトの処理がパフォーマンスに大いに影響を与えることが言及されていますね
stateを更新する上でuseEffectを使用する場面があると思います。
が、そんな時は一度以下のドキュメントを読んでみてください！
もしかすると、そのエフェクトは必要ないかもしれません！
5. エフェクトから不要な依存値をできるだけ削除する 
5つ目は、「エフェクトから不要な依存値をできるだけ削除する」です。
同じくドキュメントからの引用です
エフェクトから不要な依存値をできるだけ削除します。
例えば、メモ化する代わりに、オブジェクトや関数をエフェクトの中や外に移動させるだけで、簡単に解決できる場合があります。
ここでもエフェクトに関して言及されており、エフェクトがいかにパフォーマンスに影響を与えるかがよくわかります。
エフェクトは上手く使えれば強力な武器になりますが、下手に使えばパフォーマンスや可読性を悪化させます。
これらについても、公式ドキュメントに記載がありますので、ぜひご覧ください〜 
まとめ
はい！まとめでございます！
今回は「メモ化が本当に必要なのか」という部分にフォーカスして、公式ドキュメントから引用してきました。
私個人としては、このドキュメントを読むまでは、メモ化は基本すべきものだと思っていたので、とても驚きました 
特にメモ化を不要にする5つの手段は、パフォーマンスに関する基本的な知識となり、普段の開発で有用に活用できる手段ばかりです！
このように公式ドキュメントには、開発のクオリティを上げる情報が詰め込まれています！
隅々まで読み込みましょう 
公式ドキュメントを読むオススメの勉強法も記事にまとめましたので、ぜひご覧ください！