【React】コンポーネントの中で定義したコンポーネントを呼び出す？

以下のようにAコンポーネントの中で定義したBコンポーネントをAコンポーネントから呼び出す場合と、

function A() {
  function B() {
    return <h1>Bだよ</h1>;
  };
  return (
    <div>
      <h1>Aだよ</h1>
      <B/>
    </div>
  );
}

以下のようにAコンポーネントの外で定義したBコンポーネントをAコンポーネントから呼び出す場合とでは挙動が違います。

function A() {
  return (
    <div>
      <h1>Aだよ</h1>
      <B/>
    </div>
    );
}

function B() {
  return <h1>Bだよ</h1>;
};

• 前者の方法：
  • Aが再レンダリングされるたびにBが宣言される。（リセットされる）
• 後者の方法：
  • Aが再レンダリングされてもBはそのまま。

「Bの中身を保持したい！」という場合は後者の方法で書かないとダメ。

例えば、Bでstateを保持している場合、前者の方法だとAが再レンダリングされるたびにstateがリセットされちゃうのでstateが意味をなさなくなる。

おわり