コンポーネント全体の再レンダーを防ぎたい。

Question

前提

サンプルをご確認いただけますでしょうか。
サンプル

テキストフォームに文字を入力すると、そのテキストフォームを有するコンポーネントが再レンダーされます。
再レンダーされる度に、何のコンポーネントが何回レンダーされたかをコンソールに表示します。

実現したいこと

再レンダーされる要素をテキストフォームだけにしたいです。

発生している問題

現状はテキストフォームだけではなくヘッダーコンポーネントや、テキストのチェックボタンも再レンダーされてしまいます。

ヘッダーコンポーネントやボタンは再レンダーの必要が無いかと思いますので、ヘッダーコンポーネントやボタンは再レンダーしないようにしたいです。

該当のソースコード

import React, { useState, memo } from "react";

let parent = 0,
  parentHeader = 0,
  child = 0,
  childHeader = 0;

const App = () => {
  parent++;
  console.log("parent: " + parent);

  const [parentText, setParentText] = useState("");
  const [open, setOpen] = useState(false);
  const check = () => {
    if (parentText === "open") {
      setOpen(true);
      return;
    }
    alert("The text is incorrect.");
  };

  return (
    <>
      <ParentHeader />
      <input
        type="text"
        value={parentText}
        onChange={e => setParentText(e.target.value)}
      />
      <button onClick={check}>check text</button>
      <div>
        {open && <Child setOpen={setOpen} setParentText={setParentText} />}
      </div>
    </>
  );
};

const ParentHeader = () => {
  parentHeader++;
  console.log("ParentHeader: " + parentHeader);

  return (
    <>
      <h1>Parent</h1>
      <p>
        "open"と入力し"check
        text"ボタンを押すと、子コンポーネントをマウントします。
      </p>
    </>
  );
};

const Child = memo(({ setOpen, setParentText }) => {
  child++;
  console.log("child: " + child);
  const [childText, setChildText] = useState("");
  const checkChildText = () => {
    if (childText === "close") {
      setParentText("");
      setOpen(false);
      return;
    }
    alert("The text is incorrect.");
  };

  return (
    <>
      <ChildHeader />
      <input
        type="text"
        value={childText}
        onChange={e => setChildText(e.target.value)}
      />
      <button onClick={checkChildText}>check text</button>
    </>
  );
});

const ChildHeader = () => {
  childHeader++;
  console.log("childHeader: " + childHeader);

  return (
    <>
      <h2>Child</h2>
      <p>
        "close"と入力し"check
        text"ボタンを押すと、子コンポーネントをアンマウントします。
      </p>
    </>
  );
};

export default App;

試したこと

useMemoを使用することで、ヘッダーコンポーネントの再レンダーは防げました。
ヘッダーを再レンダーしないサンプル

const memoParentHeader = useMemo(() => {
  return <ParentHeader />;
}, []);

const memoChildtHeader = useMemo(() => {
  return <ChildHeader />;
}, []);

ただし、上記のサンプルではボタンは再レンダーされます。

const memoButton = useMemo(() => {
  return <button>...<button/>;
}, []);

上記のようにボタンもメモ化すれば再レンダーを防げるかと思いますが、この方法ですと再レンダーを防ぎたいコンポーネントや要素を一つずつメモ化しなければいけなくなります。

例えばヘッダーの他に本文や画像などを含むコンポーネントで、再レンダーの必要がある要素と必要が無い要素が入り組んでいる場合は、上記のようなメモ化する方法は効率的ではないかと思います。
また、仮にコンポーネントや要素をメモ化したとしても、コンポーネントの背景に画像やグラデーションなどを設定している場合はそれらも再レンダーされてしまいます。

理想ですが、基本的にレンダーは初回の一回だけ、再レンダーが必要な要素のみ別個に何かしらの処理、という形にしたいです。

【追記】親テキストフィールドを子で操作しない場合のサンプル

サンプル2
追記前の2つのサンプルは子コンポーネントで親テキストフィールドをリセットしていますが、親コンポーネントでuseEffectを利用し、親コンポーネントで親テキストフィールドをリセットするようにしました。

useEffect(() => {
  if (!open) setParentText("");
}, [open]);

また、親子ともテキストフィールドを別のコンポーネントに切り分け、切り分けたコンポーネント内でテキストフィールドのstateを管理するようにしました。
これにより、再レンダー適用部分がテキストフィールドコンポーネントのみになりました。

サンプル2の問題点

入力されたテキストの正誤を判定する方法につきまして、チェックボタンをテキストフィールドコンポーネントに含める方法しか思いつかなかったため、テキストフィールドのonChangeの度にチェックボタンも再レンダーされます。

また、子コンポーネントのアンマウント時に親テキストフィールドコンポーネントが2回レンダーされてしまいます。

Answer 1

私が提供できる手段としては以下の2通りあります。しかし、どちらも根本的な修正が必要で、あまり直接的な回答になっていないため、もしかしたらもっといい手段があるかもしれません。

1. Redux を使う方法
2. 根本的な設計を変える方法

この問題の難しい点

単純にテキストフィールドの更新時にはテキストフィールドのみレンダリングするというだけであれば、テキストフィールドのみ子コンポーネント化して、そこで状態を管理（useState 文を書く）すれば大丈夫です。
しかし、 Child コンポーネントで親のテキストフィールドに更新をかけているため、この方法を使うことができません。
useMemo の実装の部分でもおっしゃっていたように、更新をかける場所が入れ子になっていることが問題になります。

1. Redux を使う方法

1つ目の Redux を使う方法ですが、これは Redux が React の状態管理をするためのフレームワークなので、直接的な解決方法と言えると思います。
しかし、もともと Redux を使う前提の設計をしていないと、React のプロジェクトに途中から導入するにはそれなりの量の書き換えが必要になります。
以下、Redux の参考記事です。
Redux入門【ダイジェスト版】10分で理解するReduxの基礎

2. 根本的な設計を変える方法

Child コンポーネントから Parent のテキストフィールドに更新をかけるという設計は少し変な気がします。
そこが修正可能なのであれば、設計を変えて、親コンポーネントの更新を行わない設計にすれば、簡潔に書くことが出来るかと思います。

2つの方法を提示しましたが、冒頭に述べた通り、どちらも根本的な修正が必要な回答になってしまいました。
あまりいい手段を提示できなくてすみません。

----以下追記-----
2の方法で実践したいとのことで、いくつか問題点を上げていただいたので、その回答として追記します。

まず、checkボタンもレンダリングしてしまう問題についてはもう一つcheck用の変数を用意することで、そのcheckの真偽値によって分岐する関数を親コンポーネントで作ることによって、ボタンを親コンポーネントに持つことができます。

また、2回レンダリングをする件についても同じようにchildのcheck用変数を用意することで解決できます。
そもそも2回レンダリングをしてしまう原因ですが、childをアンマウントするタイミングと、openの変化によってparentのテキストフィールドを空にするタイミングの2回でレンダリングしてしまうからです。
これをcheck用の変数が切り替わるタイミングのみでのレンダリングにすることによって、1回のレンダリングにまとめることができます。
以下、ソースコードを載せます。雑に作ったので、関数内の変数名がbだったりしますが、ご了承ください。

const App = () => {
  parent++;
  console.log("parent: " + parent);

  const [open, setOpen] = useState(false);
  const [checkOpen, setCheckOpen] = useState(false);
  const [checkClose, setCheckClose] = useState(false);

  const checkParrentText = b => {
    if (b) {
      setOpen(true);
      return;
    }
    alert("The text is incorrect.");
  };

  return (
    <>
      <ParentHeader />
      <ParentInput checkClose={checkClose} setCheckOpen={setCheckOpen} />
      <button onClick={() => checkParrentText(checkOpen)}>check text</button>
      <div>
        {open && (
          <Child
            setOpen={setOpen}
            check={checkClose}
            setCheck={setCheckClose}
          />
        )}
      </div>
    </>
  );
};

const ParentInput = ({ checkClose, setCheckOpen }) => {
  parentInput++;
  console.log("ParentInput: " + parentInput);

  const [parentText, setParentText] = useState("");
  useEffect(() => {
    if (checkClose) setParentText("");
  }, [checkClose]);
  useEffect(() => {
    if (parentText === "open") {
      setCheckOpen(true);
    }
  }, [parentText, setCheckOpen]);

  return (
    <>
      <input
        type="text"
        value={parentText}
        onChange={e => setParentText(e.target.value)}
      />
    </>
  );
};

const Child = memo(({ setOpen, check, setCheck }) => {
  child++;
  console.log("child: " + child);
  const checkChildText = b => {
    if (b) {
      setOpen(false);
      return;
    }
    alert("The text is incorrect.");
  };
  return (
    <>
      <ChildHeader />
      <ChildInput setCheck={setCheck} />
      <button onClick={() => checkChildText(check)}>check text</button>
    </>
  );
});

const ChildInput = ({ setCheck }) => {
  childInput++;
  console.log("ChildInput: " + childInput);

  const [childText, setChildText] = useState("");
  useEffect(() => {
    if (childText === "close") {
      setCheck(true);
    }
  }, [childText, setCheck]);

  return (
    <>
      <input
        type="text"
        value={childText}
        onChange={e => setChildText(e.target.value)}
      />
    </>
  );
};

export default App;

Comments

[whoiwhoi]

ご回答いただきありがとうございます。Reduxに挫折した経験があるのと、コンポーネントの設計にこだわりはないので、ご提示いただいた2.の方策を取りたいです。 私なりに2.の方向を目指したサンプルを質問文に追記いたしましたので、何卒ご確認くださいませ。また、そのサンプルに別の問題点がありますので、併せてコメントやご回答いただけますと幸いです。 追記のサンプルはnerianighthawk様の想定される2.の設計になっていますでしょうか。

[nerianighthawk]

質問の修正に際して、回答も修正しました。
修正に対する補足になってしまいますが、親でフラグだけ管理してレンダリングを少なくする手法は、私もReduxを使うようになる前まではそれなりによく使っていた気がします。
上のようなソースコードではせいぜい3つのフラグでできますが、プロジェクトが大きくなるとこのフラグ管理がとても大変なので、ゆくゆくはReduxを使えるようになることをおすすめします。