Reactで関数が複数回呼ばれてしまう

Question

実現したいこと・前提

JSXが縦に長くなってしまうと見づらいので別けて書きたいです。
別けて書く為に関数化を試しました。
しかし、関数が複数回呼ばれてしまう問題が発生しました。

該当のソースコード

import * as React from 'react';
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

export default function App() {
  const [visible, setVisible] = React.useState(false);
  const [text, setText] = React.useState('abc');

  const MyDialog = () => {
    console.log('MyDialogが表示されました');

    return (
      <Modal show={visible} onHide={() => { setVisible(false); }}>
        <Modal.Header closeButton>
          <Modal.Title>タイトル</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <input type="text" value={text} onChange={(e) => { setText(e.target.value); }} />
        </Modal.Body>

        <Modal.Footer>
          <Button variant="secondary">閉じる</Button>
          <Button variant="primary">保存する</Button>
        </Modal.Footer>
      </Modal>
    );
  };

  return (
    <div>
      <MyDialog />

      <Button variant="primary" onClick={() => { setVisible(true); }}>
        モーダルダイアログを表示する
      </Button>
    </div>
  );
}

https://stackblitz.com/edit/react-ts-v6wluw?file=App.tsx

試したこと

関数化をやめて、関数内のコードをJSXにそのままコピペすると問題なく動作しました。
しかし、やりたい事としてはJSXを別けて書くことなので本末転倒です・・・。

補足情報（FW/ツールのバージョンなど）

• "@popperjs/core": "^2.11.6",
• "@types/react": "^18.0.8",
• "@types/react-dom": "^18.0.2",
• "bootstrap": "^5.2.3",
• "react": "^18.1.0",
• "react-bootstrap": "^2.7.0",
• "react-dom": "^18.1.0"

Comments

[hoshi-takanori]

関数コンポーネントの中で関数コンポーネントを定義するのは良くないような…。

Answer 1

やりたいことはこういうイメージでいいんでしょうか？
(最終的にはMyDialogも別ファイルに移動させるとは思いますが)

関数が複数回呼ばれてしまう問題が発生しました。

この件について何も述べられていませんが、もしやconsole.logが2回呼ばれていることについてでしょうか？
だとするのであればReact18からの仕様です
https://github.com/reactwg/react-18/discussions/19

import * as React from 'react';
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

const MyDialog = ({visible,setVisible,text,setText}) => {
  console.log('MyDialogが表示されました');

  return (
    <Modal show={visible} onHide={() => { setVisible(false); }}>
      <Modal.Header closeButton>
        <Modal.Title>タイトル</Modal.Title>
      </Modal.Header>

      <Modal.Body>
        <input type="text" value={text} onChange={(e) => { setText(e.target.value); }} />
      </Modal.Body>

      <Modal.Footer>
        <Button variant="secondary">閉じる</Button>
        <Button variant="primary">保存する</Button>
      </Modal.Footer>
    </Modal>
  );
};

export default function App() {
  const [visible, setVisible] = React.useState(false);
  const [text, setText] = React.useState('abc');

  return (
    <div>
      <MyDialog visible={visible} setVisible={setVisible} text={text} setText={setText} />

      <Button variant="primary" onClick={() => { setVisible(true); }}>
        モーダルダイアログを表示する
      </Button>
    </div>
  );
}

Comments

[minato2000]

ご回答ありがとうございます。

> やりたいことはこういうイメージでいいんでしょうか？
はい。あっております。
関数で別けてみようと自分で考えていたのですが、うまく行かずに質問しました。

> もしやconsole.logが2回呼ばれていることについてでしょうか？
はい。おっしゃる通りです。
初回に画面を表示した時に2回呼ばれます。

頂いたコードを実際に試してみました。
初回に画面を表示した時に1回呼ばれるようになりました。
こちらは解決しました。

しかし、ダイアログ内のテキストを変更するたびにconsole.logで「MyDialogが表示されました」が呼ばれるのですがこちらはどのように解決すればよいでしょうか？

React18からの仕様であるStrictModeが原因という事なので、以下の通りStrictModeを消してみたのですがダメでした。
```diff
- <StrictMode>
<App />
- </StrictMode>
```

[maisumakun]

> console.logで「MyDialogが表示されました」が呼ばれるのですがこちらはどのように解決すればよいでしょうか？

呼ばれてしかるべきものです。コンポーネントの引数を変えれば再描画が行われます。

[minato2000]

そうなんですね。
1文字打つたびに入力のフォーカスが毎回外れてしまうので、1文字打つたびにマウスでフォームを選択しなければ入力できない状態になるのでフォームが含まれるJSXは分離できないということですね。ありがとうございました。

[maisumakun]

> 1文字打つたびに入力のフォーカスが毎回外れてしまうので

それで困っていたのであれば、質問時点で明記してください。

関数コンポーネントが呼ばれることは抑制できませんが、フォーカスが外れるような再描画については抑制できる可能性があります。

[maisumakun]

…というより、この回答のコードで「1文字打つたびに入力のフォーカスが毎回外れてしまう」という現象が再現しません。

Answer 2

しかし、関数が複数回呼ばれてしまう問題が発生しました。

なぜそれが問題なのでしょうか。関数コンポーネントの呼ばれ方は保証されません。

いつ何回呼ばれるかを担保したい処理は、useEffectなどを使って書いてください。