コンポーネント呼び出し時の値の増加について

Question

以下のコードの出力結果について疑問点があります。
一度目のCupコンポーネントの呼び出しで、guestの値は「1」２回目の呼び出し時はguestが1の為「2」３回目は２+ 1で「3」となると思うのですが、出力結果が2,4,6になるのは何故でしょうか。

let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

Comments

[m.ts10806]

例えば
guest += 1
もしくは
guest++
もしくは
++guest

とした場合はどうなりますか？

[ruuuu]

下記の全てのケースにおいてもguestの初期値が0である場合、最初の出力値は「1」だと思います
guest += 1
もしくは
guest++
もしくは
++guest

[m.ts10806]

思う、ではなく実際試した結果を質問本文に追加してもらえればと。

[ruuuu]

こちらの原因が判明しました。
https://ja.react.dev/reference/react/StrictMode

[m.ts10806]

了解です。あくまで問題切り分けのために試してみましょう、というだけだったので。

Answer 1

StrictMode では。
<StrictMode> – React

Comments

[ruuuu]

ご回答ありがとうございます。
２回レンダリングされるため、出力値が２倍になっていたのですね