「Reactでawaitしたら壊れた」「Reactでawaitしたら壊れた」 ～ useEffectの誤用と2回実行 ～

※ 小説です。続き物ではないですが一応前回は[こちら](https://qiita.com/namn1125/items/2d84086394e97489776a)
※ 読むとReactで非同期処理が書きやすくなるかもしれません。
※ Reactの知識が前提になります、ご了承ください。Rustや[Tauri](https://tauri.app/)の知識は一切不要です。

:::note info
本記事で伝えたいこと

- 「Reactで非同期処理を扱いたいから `useEffect` 」 → :x: 安直すぎる
    - データフェッチ系の処理 → クリーンアップを設定するなら `useEffect` でOK
    - ユーザ登録のような外部に影響のある処理 → **イベントハンドラ内で実行** するべき
- `useEffect` は「特定のイベントによってではなく、 **レンダー自体によって引き起こされる副作用** を指定するためのもの」である

という内容が **[公式ドキュメント](https://ja.react.dev/learn/synchronizing-with-effects)に書いています** 。
:::

# プロローグ

もう夜も遅いのに、どの教室にも明かりが灯っていた。

TypeScript「ふぅ...やっと落ち着いた...」

実行委員のCSSちゃんから依頼された玄関装飾用のスクリプトを納めた私は、座る場所を求めてあてもなく彷徨っていた。

今学校全体は <ruby> [Qiita Engineer Festa](https://qiita.com/official-campaigns/engineer-festa/2023) <rt>学園祭</rt></ruby> 準備期間真っ只中。今週末の本祭に向けて皆が出し物を用意していたのだった。

TS「...隣の教室に行くか...」

もう足が限界に近かった私は、お化け屋敷と化した自学級に見切りをつけ、隣の教室にお邪魔させてもらうことにした。

隣はRustちゃんのクラスだが、人見知りなあの子のことだ、もう家に帰っているであろう...

Rust「............」

居た。意外なことに、教室にはRustちゃん以外誰も居らず、外の喧騒が嘘のように静まり返っていた。

そういえばRustちゃんのクラスは演劇をするから教室での準備はないんだっけ。

TS「...お邪魔しま～す...」

Rust「............」

気まずい。パソコンを見つめるRustちゃんに呼びかけても反応はなく、何やら難しそうな ―― 先日[シャローコピーの説明](https://qiita.com/namn1125/items/2d84086394e97489776a)をした時のような ―― 不思議そうな顔をしている。

TS「...あの、Rustちゃんは一体何を作っているの...？」

Rust「！！、ああ、TypeScriptさんでしたか。実装に詰まっていて気づきませんでした...」

TS「私のことは"ちゃん"付けで呼んでほしいなぁ。それより、Rustちゃんでも実装で困ることあるんだ？」

Rust「はい、Pythonさんから頼まれたアプリケーションを[Tauri](https://tauri.app/)で作っていたのですが...」

TS「へー、どんなアプリ？」

Rust「ええとですね...」

Python「Rustちゃーーーん！！！！どんな塩梅？」

外の喧騒を引き込むかのように、件の依頼主が慌ただしくやってきた。

Python「おや？君は隣のクラスのTypeScriptちゃんじゃないか」

TS「どうも...隣がアレなもので椅子を借りてます...」

Python「Rustちゃんと友達なのかい？へぇ、この子に私以外の友達が居たとは...」

それはこっちのセリフである。それにRustちゃんに失礼じゃない？...私も同じこと思ったけど...

Rust「ちょうど今TypeScriptちゃんに、Pythonさんから依頼されたアプリについて説明しようとしていたんですよ。」

Python「私のアプリに興味があるのかい？嬉しいなぁ！！」

そう言うとPythonちゃんは雑誌の記事を見せつけてきた。

Python「先日[こんな記事](https://qiita.com/namn1125/items/bc81f12f7bcfb2494c9c)を見つけてさ！(ダイマ)」

https://qiita.com/namn1125/items/bc81f12f7bcfb2494c9c

Python「これを読んでから、どうしても学園祭の出し物で自作の人工知能を展示したくなって、GUI周りをRustちゃんにお願いしていたんだよ[^chatgpt]！で、どんな感じ？」

[^chatgpt]: 本アプリのリポジトリはこちらになります → Before: [ogiri_gpt](https://github.com/anotherhollow1125/ogiri_gpt_peke/blob/before/src/components/OdaiElm.tsx) After: [ogiri_gpt](https://github.com/anotherhollow1125/ogiri_gpt_peke/blob/main/src/App.tsx) 。なお、実際はChatGPTを使用しております...ダイマして申し訳ありません！！！ 

Rust「いや、それが...」

グイグイと来るPythonちゃんに対して、Rustちゃんは恐る恐る画面を見せる。

![お題「突然明日学校がお休みになりました。どうして？」
Melchiorが回答します。
何故同じお題が与えられたのですか?
Balthasarが回答します。
突然明日学校がお休みになりました。理由は、校庭が宇宙人によるエイリアンパーティーの会場として貸し出されるためです！
Casperが回答します。
突然明日学校がお休みになりました。なぜなら、校内に流れるウクレレの音が突然増えたせいで、全ての授業がウクレレレッスンになったからです！](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205472/a15cd398-ca69-fdfa-3995-50ac23196475.png)

<!-- 全員同じ版
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205472/3442bdb5-9160-2abc-c05a-8db91da030d1.png)
-->

TS「ええっと、これは、大喜利...？」ｳｸﾚﾚﾚｯｽﾝ...

Python「そう！私が独自に開発している大喜利AIさ！メルキオール、バルタザール、カスパーというテイストの違った3人をプロデュースしていてね。与えられたお題に対してちょっと変わった返答をするんだよ。」

TS「なるほど...？メルキオールさん？のはお題に対する回答なんですか？『同じお題が与えられた』と言っていますけど...」

Rust「彼女たちAIはPythonさんのサーバーでずっと稼働していて、今私が作っているアプリは対話用のインターフェースです。なので、おそらくお題を受け取っての、正直な回答ですね。」

そう説明している間、Rustちゃんはまた先程の不思議そうな顔をしていた。

Rust「時間がなかったので[スタブ](https://wa3.i-3-i.info/word14933.html) (ダミーのこと)を使わず直接彼女たちに受け答えしてもらうように書いていたのですが」

そこは頑張ってでもスタブを使うべきでは...という言葉は、先程納品したスクリプトの出来を思い出して飲み込んだ。学園祭準備は佳境で他人のことを言える状況ではないのである。

Rust「そうなると流石に同じお題ばかり出すのは気が引けるので、重複しないようにしていました。そのため、このお題も初めて出しました。」

その手間を考えるとやっぱりスタブを用意したほうが良かったんじゃ...？悩める部分かも。

TS「一度しか出していないお題が二度目だと言われる、という怪奇現象で悩んでいたんだね...なるほど」

不思議そうな顔をしていたわけだ。

Python「メルキオールの気が狂ったとでも言いたいのかい？言っておくけど、彼女たちは大喜利に関してはおそらくこの学校の1年よりはまともな回答をするよ」

微妙な性能だな！...そして大喜利に対するまともな回答って何？

Rust「こんな現象はCLIでテストしていた間も起きなかったので、おそらく私が書いたReactコードがおかしいんだと思います。」

TS「なるほどね...って！<ruby>わたし<rt>TypeScript</rt></ruby>で実装する必要があったなら<ruby>TypeScript<rt>わたし</rt></ruby>に頼んでくれればよかったのに！」

Python「[ruby要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby)の乱用は楽しいかい？」

TS「さっきからちょいちょいメタいこと言ってきますねPythonさん...」

筆者「(ごめんなさい楽しいです)」

# 非同期関数と `useEffect`

Rust「TSちゃんに頼もうかなと最初は思ったのですが...忙しそうでしたので...」

TS「あー...」

確かにここ最近、何度もRustちゃんとはすれ違っていたけど、挨拶を交わすのが精一杯だったな...

Rust「画面だけならと思って挑んでみたのですが、気づけば<ruby>バックエンド<rt>わたしの範囲</rt></ruby>よりもたくさん書いていました...」ｶﾁｶﾁｯ

VSCodeの画面が映る。ちょうどお題と回答を表示するためのコンポーネントを開いていたらしい。

```tsx:OdaiElm.tsx
// import部省略

function OdaiElm({ odai }: { odai: Message }) {
  const [melchiorAnswer, setMelchiorAnswer] = useState<Message | undefined>(
    undefined
  );
  const [balthasarAnswer, setBalthasarAnswer] = useState<Message | undefined>(
    undefined
  );
  const [casperAnswer, setCasperAnswer] = useState<Message | undefined>(
    undefined
  );

  useEffect(() => {
    (async () => {
      const context = [odai];

      const melchiorRes = await invoke<Message>("melchior", { context });
      setMelchiorAnswer(melchiorRes);
      context.push(melchiorRes);

      const balthasarRes = await invoke<Message>("balthasar", { context });
      setBalthasarAnswer(balthasarRes);
      context.push(balthasarRes);

      const casperRes = await invoke<Message>("casper", { context });
      setCasperAnswer(casperRes);
    })();
  }, [odai]);

  const userElm = <MessageElm text={odai.content} avatar={get_avatar(odai)} />;

  const melchiorElm = melchiorAnswer ? (
    <MessageElm
      text={melchiorAnswer.content}
      avatar={get_avatar(melchiorAnswer)}
    />
  ) : (
    <></>
  );

  // balthasarElm, casperElmはほぼ同じなので省略

  return (
    <Grid container>
      {[userElm, melchiorElm, balthasarElm, casperElm].map((elm, id) => (
        <Grid item key={id}>
          {elm}
        </Grid>
      ))}
    </Grid>
  );
}

export default OdaiElm;
```

<details><summary>完全版</summary>

```tsx:OdaiElm.tsx
import { useState, useEffect } from "react";
import MessageElm from "@/components/MessageElm";
import Grid from "@mui/material/Grid/Grid";
import { Message } from "@/structs";
import { get_avatar } from "@/avatar";
import { invoke } from "@tauri-apps/api/tauri";

function OdaiElm({ odai }: { odai: Message }) {
  const [melchiorAnswer, setMelchiorAnswer] = useState<Message | undefined>(
    undefined
  );
  const [balthasarAnswer, setBalthasarAnswer] = useState<Message | undefined>(
    undefined
  );
  const [casperAnswer, setCasperAnswer] = useState<Message | undefined>(
    undefined
  );

  useEffect(() => {
    (async () => {
      const context = [odai];

      const melchiorRes = await invoke<Message>("melchior", { context });

      setMelchiorAnswer(melchiorRes);
      context.push(melchiorRes);

      const balthasarRes = await invoke<Message>("balthasar", { context });

      setBalthasarAnswer(balthasarRes);
      context.push(balthasarRes);

      const casperRes = await invoke<Message>("casper", { context });

      setCasperAnswer(casperRes);
    })();
  }, [odai]);

  const userElm = <MessageElm text={odai.content} avatar={get_avatar(odai)} />;

  const melchiorElm = melchiorAnswer ? (
    <MessageElm
      text={melchiorAnswer.content}
      avatar={get_avatar(melchiorAnswer)}
    />
  ) : (
    <></>
  );

  const balthasarElm = balthasarAnswer ? (
    <MessageElm
      text={balthasarAnswer.content}
      avatar={get_avatar(balthasarAnswer)}
    />
  ) : (
    <></>
  );

  const casperElm = casperAnswer ? (
    <MessageElm text={casperAnswer.content} avatar={get_avatar(casperAnswer)} />
  ) : (
    <></>
  );

  return (
    <Grid
      container
      sx={{
        width: "100%",
        alignItems: "center",
        justifyContent: "center",
        m: "0 auto",
      }}
    >
      {[userElm, melchiorElm, balthasarElm, casperElm].map((elm, id) => (
        <Grid
          item
          xs={12}
          sx={{
            alignItems: "center",
            justifyContent: "center",
          }}
          key={id}
        >
          {elm}
        </Grid>
      ))}
    </Grid>
  );
}

export default OdaiElm;
```
</details>

Rust「ブログ等を漁り見様見真似で書いた部分です。処理を要約すると

- 親要素が持つテキストフィールドからのお題を `odai` 引数として受け取っている
- `invoke` 関数でAIたちにお題等のコンテキストを渡し、回答を非同期で得ている
    - AIたちは順番に回答することで内容の重複を防いでいる
- 得た回答を `useState` フックの `set〇〇` 関数でセットしている

といった感じになっています。」

TS「なるほどなるほど...Reactが初めてとは思えない...うーん、なんで `useEffect` を使ったの？」

Rust「非同期関数をReactで呼び出す方法がわからなくて...とりあえずChatGPTさんに聞いたら『 `useEffect` 内で呼べば良い』と教えてもらったので、そのように書きました。」

<details><summary>ChatGPTとの実際のやり取り</summary>

---

Rust「Reactで非同期関数を連続で呼びたいです。どうすれば良いでしょうか？」

ChatGPT (GPT-4) 「JavaScriptの非同期関数を連続で呼び出す際には、Promiseやasync/awaitを利用することが一般的です。これらは非同期操作を制御し、非同期処理が完了した後に次の処理を実行することを可能にします。

以下に、Reactのコンポーネント内で非同期関数を連続で呼び出す例を示します。この例では `async` / `await` を使用します。

```jsx:jsx
import React, { useEffect } from 'react';

const MyComponent = () => {
    useEffect(() => {
        const asyncFunc1 = async () => {
            // 非同期の操作を行う
            // 例えばfetch APIを使用してデータを取得するなど
            console.log('First function');
        };

        const asyncFunc2 = async () => {
            // 別の非同期の操作を行う
            console.log('Second function');
        };

        const runAsyncFunctions = async () => {
            await asyncFunc1(); // 最初の非同期関数を実行
            await asyncFunc2(); // その後、次の非同期関数を実行
        };

        runAsyncFunctions();
    }, []); // 空の依存配列を指定して、このエフェクトがコンポーネントのマウント時にのみ実行されるようにします。

    return (
        <div>
            {/* コンポーネントのUIをレンダリング */}
        </div>
    );
};

export default MyComponent;
```

この例では、2つの非同期関数（ `asyncFunc1` と `asyncFunc2` ）が定義されています。それらは `runAsyncFunctions` 内で連続して呼び出され、先に呼び出された関数の処理が終わるのを待ってから次の関数が呼び出されます。これにより、非同期関数が順序良く実行されます。

また、 `useEffect` フック内でこれらの関数を呼び出しています。これにより、非同期関数はコンポーネントがマウントされた直後に一度だけ実行されます。」

---
</details>

ChatGPTに"さん"付けするRustちゃん可愛いな...じゃなくて！

TS「多分それが原因だね...」

Python「ChatGPTは所詮AI。頼りすぎは禁物ってことだな！」

<ruby>Python<rt>あなた</rt></ruby>がそれ言っちゃう？

TS「ChatGPTに従ったことが悪いんじゃなくて、 `useEffect` の性質が原因と言いたかったのだけど...」

Rust「 `useEffect` に渡したクロージャは2回呼び出される、ということでしょうか？」

TS「そう。正確にはReactの `StrictMode` が有効化されている場合、 **純粋性の確認のためにデバッグ時に限り[コンポーネントが2回マウントされる](https://qiita.com/asahina820/items/665c55594cfd55e6f14a) [^strictofficial]** んだよね...マウントの過程で `useEffect` の無名関数も2回実行されちゃう！」ﾎﾜｲﾄﾎﾞｰﾄﾞｶｷｶｷ...

[^strictofficial]: わかりやすさのためにQiita記事を載せさせていただきましたが、一応、公式ドキュメントへのリンクも載せます。: https://react.dev/reference/react/StrictMode

![マウント図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205472/63d273d8-f3ad-6267-56a7-b687c68a8495.jpeg)

Rust「各所に `console.log` を入れてデバッグしてみると、確かに2回呼ばれていますね。」

```diff_tsx:OdaiElm.tsx (抜粋)
  useEffect(() => {
    (async () => {
+       console.log("Process Start");

      const context = [odai];

+       console.log(`${context.map((m) => m.content)}`);

      const melchiorRes = await invoke<Message>("melchior", { context });

      setMelchiorAnswer(melchiorRes);
      context.push(melchiorRes);

+       console.log(`${context.map((m) => m.content)}`);

      const balthasarRes = await invoke<Message>("balthasar", { context });

      setBalthasarAnswer(balthasarRes);
      context.push(balthasarRes);

+       console.log(`${context.map((m) => m.content)}`);

      const casperRes = await invoke<Message>("casper", { context });

      setCasperAnswer(casperRes);

      context.push(casperRes);
+       console.log(`${context.map((m) => m.content)}`);

+       console.log("Process End");
    })();
  }, [odai]);
```

![OdaiElm.tsx:29 Process Start
OdaiElm.tsx:33 お題「テストで赤点を取ったのにお母さんは褒めてくれました。どうして？」
OdaiElm.tsx:29 Process Start
OdaiElm.tsx:33 お題「テストで赤点を取ったのにお母さんは褒めてくれました。どうして？」
OdaiElm.tsx:40 お題「テストで赤点を取ったのにお母さんは褒めてくれました。どうして？」,Melchiorが回答します。お母さんは「素晴らしい赤点だ！これぞ優勝赤点だ！」と褒めてくれたのでしょう。
OdaiElm.tsx:40 お題「テストで赤点を取ったのにお母さんは褒めてくれました。どうして？」,Melchiorが回答します。何故同じお題が与えられたのですか？
OdaiElm.tsx:47 お題「テストで赤点を取ったのにお母さんは褒めてくれました。どうして？」,Melchiorが回答します。お母さんは「素晴らしい赤点だ！これぞ優勝赤点だ！」と褒めてくれたのでしょう。,Balthasarが回答します。お母さんは「赤点を取れるなんて、君は本当に特別だね」と褒めてくれたのでしょう。
OdaiElm.tsx:54 お題「テストで赤点を取ったのにお母さんは褒めてくれました。どうして？」,Melchiorが回答します。お母さんは「素晴らしい赤点だ！これぞ優勝赤点だ！」と褒めてくれたのでしょう。,Balthasarが回答します。お母さんは「赤点を取れるなんて、君は本当に特別だね」と褒めてくれたのでしょう。,Casperが回答します。お母さんは「赤点を取ることで逆に勉強の大切さを学び、成長した証拠だ」と褒めてくれたのでしょう。
OdaiElm.tsx:56 Process End
OdaiElm.tsx:47 お題「テストで赤点を取ったのにお母さんは褒めてくれました。どうして？」,Melchiorが回答します。何故同じお題が与えられたのですか？,Balthasarが回答します。「お母さんは、君が勉強が苦手なことをよく知っていて、努力したことを褒めてくれたのかもしれませんね」と褒めてくれたのでしょう。
OdaiElm.tsx:54 お題「テストで赤点を取ったのにお母さんは褒めてくれました。どうして？」,Melchiorが回答します。何故同じお題が与えられたのですか？,Balthasarが回答します。「お母さんは、君が勉強が苦手なことをよく知っていて、努力したことを褒めてくれたのかもしれませんね」と褒めてくれたのでしょう。,Casperが回答します。お母さんは「赤点を取ったけど、それでも頑張った姿勢を見て感動したから」と褒めてくれたのでしょう。
OdaiElm.tsx:56 Process End](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205472/c06723c0-7488-85f3-a016-4b0ace6fb1c4.png)

Python「ここで同じお題が2回与えられたから混乱したわけか...あれ？同じ行の出力が直ちになされていたりで、同じ関数を2回実行しているように見えないのだけど...？」

TS「これは中で実行されているのが非同期関数だからだね！同じ関数が2つ、並行処理されているので、近いタイミングで出力されているんだよ。処理順を描き表してみるとこんな感じ[^processorder]」ｶｷｶｷ...

[^processorder]: JS/TSの(ブラウザにおける)プロセスはシングルスレッドな上に、本来はPromiseのコールバックとして呼ばれている感じですので、誤解を与えてしまう図な可能性がありますが、あくまでも処理順番の直感的な図と捉えていただければと思います。一応補足しておきました。

![処理順番](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205472/f46ee3dd-2738-8007-1e92-f6a6dacbb3d3.jpeg)

Rust「 `console.log` の出力結果は読みにくいですが、どう動いているかはわかりましたね。ところで原因となる `StrictMode` を有効にした記憶はないのですが...テンプレートに最初から書いてあったのかな...」

> VSCode :mag_right: タブ > Search欄に `StrictMode`

Rust「 `main.tsx` というファイルにて `React.StrictMode` タグが指定されていますね、これでしょうか？」

```tsx:tsx
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);
```

TS「そうそう。それで囲まれていると `StrictMode` が有効になって、2回走っちゃう」

Python「じゃあ消してしまえば？」

Rust「それはなんというか...負けた気がします。」

Python「うーん...もう本祭も近いしとりあえず問題なければ良いんじゃない...？」

TS「Pythonさん的にはそれでいいかもしれないけど...」

Rust「 `StrictMode` みたいな名前の機能を外して後悔しなかった試しがないので...できれば残したいです」

Python「それは確かに...他に解決方法はないかな...？」

Rust「クロージャが2回走ってしまうことさえ分かれば、レンダリングをまたいで状態を保持できる `useRef` を使うことで `invoke` 関数の呼び出しは回避できる気がします。」

TS「Rustちゃん短期間でそこまで身につけたの？すごいなぁ...」

Rust「こんな感じでしょうかね。」

```diff_tsx:OdaiElm.tsx (抜粋)
+ import { useRef } from "react";
// 省略

function OdaiElm({ odai }: { odai: Message }) {
  // 省略

+   const running = useRef(false);

  useEffect(() => {
+     if (running.current) {
+       return;
+     }
+
+     running.current = true;

    (async () => {
      const context = [odai];

      const melchiorRes = await invoke<Message>("melchior", { context });

      // 省略

      setCasperAnswer(casperRes);

+       running.current = false;
    })();
  }, [odai]);

  // 省略
}
```

TS「 `console.log` の出力を見た感じ、期待通り無名関数は1回しか実行されていないみたいだね」

![OdaiElm.tsx:29 Process Start
OdaiElm.tsx:33 お題「こんな学校は嫌だ！どんな学校？」
OdaiElm.tsx:40 お題「こんな学校は嫌だ！どんな学校？」,Melchiorが回答します。「こんな学校は嫌だ！『カメレオン学校』- 先生も生徒も、授業中にクラスの壁や机に溶け込んでしまうんです！」
OdaiElm.tsx:47 お題「こんな学校は嫌だ！どんな学校？」,Melchiorが回答します。「こんな学校は嫌だ！『カメレオン学校』- 先生も生徒も、授業中にクラスの壁や机に溶け込んでしまうんです！」,Balthasarが回答します。「こんな学校は嫌だ！『スキップ授業学校』- 全ての授業で先生が欠席し、生徒は自由に友達と遊んで過ごすだけの学校です！」
OdaiElm.tsx:54 お題「こんな学校は嫌だ！どんな学校？」,Melchiorが回答します。「こんな学校は嫌だ！『カメレオン学校』- 先生も生徒も、授業中にクラスの壁や机に溶け込んでしまうんです！」,Balthasarが回答します。「こんな学校は嫌だ！『スキップ授業学校』- 全ての授業で先生が欠席し、生徒は自由に友達と遊んで過ごすだけの学校です！」,Casperが回答します。「こんな学校は嫌だ！『冷蔵庫学校』- 教室の中がいつも冷え冷えで、生徒たちは氷漬けになってしまうんです！」
OdaiElm.tsx:56 Process End](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205472/a1340979-4e48-5bfe-beaf-d04092cd35f1.png)

Rust「他言語では[セマフォ](https://wa3.i-3-i.info/word13357.html)や[ミューテックス](https://wa3.i-3-i.info/word13360.html)と呼ばれる、排他制御方法を参考にしました...が...」

Python「が？」

...

...

...

TS&Rust「「
＿人人人人人人人人人人人人人人人＿
＞　**違う、こうじゃない！！！！**　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣
」」

Python「某ポスターかな[^poster]」

[^poster]: ちなみに元ネタのほうは「違う、そうじゃない」

TS「なんていうかこれじゃない感が...言語化できないけどこれは正解ではない気がする...！！ `useRef` が必要になるという新たな問題が発生している感が...」

Rust「排他制御が必要な場面なら周辺に関連した記述が見られるはずです。例えば<ruby>Rust<rt>わたし</rt></ruby>の場合だと `std::thread::spawn` や `tokio::spawn` でマルチスレッドや並行処理の文脈が見受けられたりしますが、 `useEffect` に排他制御が必要というのがなんか違うような気がします。」

TS「うーん、`useEffect` の使い方を履き違えている気がしてきた...こういう時は基本に立ち返って」

Python「公式ドキュメントの確認だね！」

TS「私のセリフ持って行かないで！><」

# コンポーネントよ純粋であれ

Rust「先程TSちゃんは『純粋性の確認のために2度マウントされる』と言っていた気がするのですが、そこを詳しく知りたいです」

TS「ええと、純粋について書いているドキュメントは...[これ](https://ja.react.dev/learn/keeping-components-pure)かな」

https://ja.react.dev/learn/keeping-components-pure

TS「始めの方は純粋関数に関する記述だけど...Rustちゃんは純粋関数は知ってる...？」

Rust「[可変なグローバル変数を見ると蕁麻疹が出る](https://doc.rust-jp.rs/book-ja/ch19-01-unsafe-rust.html#:~:text=%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E5%8F%AF%E8%83%BD%E3%81%AA,unsafe%E3%81%A8%E8%80%83%E3%81%88%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%99%E3%80%82) [^global]ぐらいには存じています。」

[^global]: データ競合を防ぐ目的と、この純粋関数の話は少し文脈が違います。が、Rustちゃんはこの仕様について理解する過程で純粋関数についても理解したのだと思ってください。

TS「そかそか、ということはこのドキュメントの最初の方もすでに理解してそうだね。」

Rust「そうですね。コンポーネントは純粋関数にする、つまり『**同じ引数が与えられたら**副作用を引き起こさずに**常に同じ結果を返す**』ようにする。このことを意識して作っていくものだと思っていました。」

:::note info
純粋関数とは

- 同じ引数に対して、同じ返り値を返す
- 副作用を引き起こさない

という、「参照透過性」を満たす関数のこと
:::

Python「副作用...？グローバル変数恐怖症...？グローバル変数の使用にどんな問題があるんだ...？」

TS&Rust「あー...(察し)」

Rust「...ちょっと宗教的にグローバル変数は書きたくないのでTSちゃん頼めますか[^mut]？」

[^mut]: Rust「<ruby>Rust<rt>わたし</rt></ruby>の場合でも `&mut` 等を使えば副作用のある関数の説明はできたりしますが、ややこしくなるので今回は黙っています！」

TS「りょーかい。Python書けるか自信ない[^sum]けど...えーっと...」ｶﾀｶﾀ...

[^sum]: Pythonには組み込みで `sum` 関数がありますが記事執筆時筆者もその存在を忘れて変数として使ってしまっていました...TSちゃんは `sum` 関数を知らなかったという設定でお願いします(あまり良くないだけで直すほどのものではない)

Python「なんか気を遣われてる...？！わざわざ合わせてくれなくても...」

```python:Python (純粋じゃない関数)
sum: int = 0 # グローバル変数

def add_to_sum(i: int) -> int:
    global sum
    sum += i
    return sum
```

TS「例えばこの関数について、 `add_to_sum(5)` は何を返してくるでしょうか...？」

Python「5じゃない？」

TS「さっきの `add_to_sum(5)` 実行後の `add_to_sum(10)` は？」

Python「15だね」

TS「色々な引数で何回も実行した後の `add_to_sum(5)` は...？」

Python「... `sum` の中身次第だから **即答はできない** かな...」

TS「そう... `sum` という **外環境の変数に依存** するから **即答できない** というのが大切...一方で」ｶﾀｶﾀ...

```python:Python (純粋関数)
def add(a: int, b: int) -> int:
    return a + b
```

TS「この関数は純粋関数なんだけども、 `add(1, 1)` は？」

Python「 `1+1` は？みたいな質問ですよねそれ...2」

TS「 `add(4294967296, 8589934592)` は？」

Python「(数クロックだけ考えて)...12884901888」

TS「 `add(2, 3)` は？」

Python「5」

TS「 `add(4294967296, 8589934592)` は？」

Python「12884901888」

TS「なんで即答できたんですか？」

Python「いやだってさっきも聞いてきたじゃん()」

TS「さっきの `sum` みたいに外部の状況で変わったりしない...？」

Python「内部の処理は **引数だけで決まる** 関数みたいだから、引数を教えてもらえれば同じ答えを返して良いでしょう。」

TS「そう、これが純粋関数にするメリットで、 **一度計算したらどこかに<ruby>記憶<rt>キャッシュ</rt></ruby>しておけば、再計算が不要** になるんだよ！」

Python「あっ！競プロで使われる[メモ化](https://qiita.com/alchemist/items/c75174c41b0bcd31ecc6)の考えか！」

TS「Reactではレンダリング計算回数を減らすために、メモ化の考えを多用するんだよね。関連するフックもたくさんあって、だから純粋関数ばかり書くので(ライブラリ使用者が)**可変なグローバル変数を使う場面はない** 感じ」

Python「不変な、定数としての利用はランタイム時での純粋性が保てるから大丈夫そう...ところでさっき言っていた副作用という単語について説明に出てこなかったような...？」

TS「そうだね、ここからは可変なグローバル変数を使うデメリット、副作用の話になります...」ｶﾀｶﾀ...

```python:Python (副作用のある関数)
sum: int = 0 # グローバル変数

def add_and_save_to_sum(a: int, b: int) -> int:
    res = a + b

    ### 副作用
    global sum
    sum += res
    ###

    return res
```

TS「この関数でさっきの `add_and_save_to_sum(4294967296, 8589934592)` みたいな問答をしたとして、どうなるかな...？」

Python「引数だけで返り値が決まるから、同じくメモ化できそう...？」

TS「じゃあ、同時に `sum` の値がどうなるか聞いたら...？」

Python「問答を始める前に尋ねられることを知らないとキツい...あ、メモした値を返すだけじゃなくて `sum` の計算も一緒にしなきゃいけない...？！」

TS「そう、つまり、 **単純にキャッシュした値に置き換えることはできない** という弊害が出ちゃう！これはこの関数が単に計算して値を求めるだけじゃなくて **関数の実行が外部に影響を与えている** からだよね。この影響が『副作用』！」

Python「さっきの問答で`sum`の値を求める必要があったみたいに、副作用がある関数だと実行することに意味ができちゃうから、実行したことにして計算済みの値に置き換えるってわけにいかないのか...」

TS「そう！Reactのレンダリングだと、副作用で全体に影響がある場合スキップするわけにいかなくなるから、とても困るのです()　ここまでをまとめるとこんな感じかな」ｶｷｶｷ...

:::note info
改めて

純粋関数とは **計算結果をキャッシュした値で置き換えても問題がない** 関数であり、そのためには

- 同じ引数に対して、同じ返り値を返す
- 副作用を引き起こさない
    - 言い換えると、外部への影響を引き起こさない

という、「参照透過性」を満たしている必要がある
:::

TS「補足しておくと、今回の説明では可変なグローバル変数が目の敵にされていたけど、グローバル変数以外にも関数を不純にする方法は色々あるよ！詳細は割愛」

Rust「話をReactに戻しますが、TSちゃんは `StrictMode` は『純粋性の確認のために』マウントを2回行うみたいなことを先程言っていましたよね？」

TS「言った言った。これも[このページ](https://ja.react.dev/learn/keeping-components-pure#detecting-impure-calculations-with-strict-mode)に書いてあるね。」

- [StrictMode で純粋でない計算を検出](https://ja.react.dev/learn/keeping-components-pure#detecting-impure-calculations-with-strict-mode)

TS「純粋関数はキャッシュした値を返してもよい。返しているはず。それならば何度呼び出しても問題ない。なのでデバッグ時はとりあえず2回呼び出して表示が変になっていないかを確認している...という考えみたい！」ｶｷﾀｼ...

![同じ外見2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205472/7259d03a-13ba-ddf6-e68f-4b088bc06a90.jpeg)

Rust「TSちゃんとPythonさんが先程していた `add(4294967296, 8589934592)` の問答に似たことをデバッグ時に行って、副作用の影響で変な現象が起きたりしないか確認していたわけですね。なるほど」

Rust「(ところで、 **純粋関数ではない `useEffect` のクロージャも2回呼ばれている** のが何故なのか気になる...うーん？なんで？)」

↑ Rustちゃんは後述の[ある勘違い](#useeffect-はどんな副作用を起こしてもいい場所というわけではない)をしています。`useEffect`も2回実行される理由は後述の[こちら](#o-外部システムとの同期例-打ち消せる場合)や[こちら](#x-useeffect-を使ってはいけない例商品購入)

Python「なるほどね...純粋関数や副作用がどういうものかはわかったよ、ありがとう...そして二人共なーんか上からだったけど...」

TS「それはその説明のためで、ごめんなさい...」

Python「いや、TSちゃんはいいんだ、Rustちゃんさ。**立派にうちのAIたちに対して副作用を起こしているよね**...？お題を出すって形でさ！」

Rust「！！！」

依頼したのPythonちゃんなのにその指摘は...合っているけど理不尽では()

Python「それに宗教的に書けないとかどうとか言ってたけど、さっき挙げていた解決方法の `useRef` って思いっきり可変なグローバル変数[^static]みたいな感じじゃない？」

[^static]: スコープや挙動等を考慮するとどちらかと言うとstatic変数の方が合っていますが、尺の都合上説明を省略しています。

Rust「ゴフッ！」

TS「Rustちゃん！！大丈夫？」

Rust「...意識しないようにしていたんですよ...！それにそう思ったからこそあの解決方法は間違っているって言いましたし...<font color="#999999">一応<ruby>Rust<rt>わたし</rt></ruby>にも`Rc<RefCell<T>>`や`Arc<Mutex<T>>`を使った代替方法がありますし、TSちゃんに<ruby>そこ<rt>ｽﾚｯﾄﾞｾｰﾌ</rt></ruby>まで求めていませんでしたし...ｺﾞﾆｮｺﾞﾆｮ...</font>」

Rust「それに！入出力を伴うプログラムで副作用を全く起こさないのは不可能です！」

今日のRustちゃん表情豊か...疲れているのかな

Rust「だから<ruby>副作用を書くために<rt>・・・・・・・・・</rt></ruby> `useEffect` フックを使っていました。この書き方なら問題ないはずです。」

TS「それなんだけどね、[公式ドキュメントの後半](https://ja.react.dev/learn/keeping-components-pure#where-you-_can_-cause-side-effects)曰く、多分それが今回の問題の原因というか争点だね...」

Rust「え...？」

# `useEffect` は「どんな副作用を起こしてもいい場所」というわけではない

- [副作用を引き起こせる場所](https://ja.react.dev/learn/keeping-components-pure#where-you-_can_-cause-side-effects)

TS「[このセクション](https://ja.react.dev/learn/keeping-components-pure#where-you-_can_-cause-side-effects)を要約するとこんな感じだね...

- Rustちゃんが言った通り、副作用を起こさないプログラムの方が珍しい
- でも副作用が起きるのは普通 **レンダリングとは無縁なイベントハンドラ内のはず**
    - **イベントハンドラは純粋である必要はない**
- どうしても **レンダー後に** 副作用を起こしたい場合 `useEffect` を使えば可能だけど **最終手段である**

」

Python「Rustちゃんはいきなり最終手段を取っていたわけか...」

Rust「てっきり名前から『副作用を起こしていい場所』という意味かと思っていました...うーん？ちょっとまだ『レンダリングとは無縁』の辺りがよくわからないです。」

TS「 `useEffect` の関連するドキュメントを読んでみた方が良さそう...[これ](https://ja.react.dev/learn/synchronizing-with-effects)かな」

https://ja.react.dev/learn/synchronizing-with-effects

TS「また純粋・不純に関係した記述が最初の方に書いている[^quote]ね...えーっと...

> Reactには2つのロジックがある。
> 
> - レンダーコード: コンポーネントのレンダリングに使う。さっきメモ化の話をしたように、単純な計算を行うだけで、純粋じゃなきゃならない
> - イベントハンドラ: 計算だけではなく何かを**実行する**ものであり、**特定のユーザアクション(クリックやフォーム送信)を起因とする副作用** が含まれる

」

[^quote]: ドキュメント由来の部分を示すため引用風に書いていますが、内容を要約したものになります。だからTSちゃんの口調のままです。

Rust「イベントハンドラはレンダリングと切り分けて考えてしまって良い...？...！そうか！ **イベントハンドラ内に副作用をまとめる** 必要があったんだ！...そもそも `function OdaiElm({ odai }: { odai: Message })` の引数と返り値が1対1対応していないのがおかしくて...**あ、イベントハンドラなら非同期関数も書ける**...！修正方法わかりました、ありがとうございます...！」ｶﾀｶﾀｶﾀｶﾀｶﾀ...

TS「コンポーネントを分割する時に関連する処理を書く場所って迷うよね...その辺の混乱が原因だったのかな？ともかく解決方法わかったみたいで良かった！」

Python「でも副作用を書くのがイベントハンドラで事足りるなら、 **`useEffect` ってなんのためにあるんだ** ？」

TS「確かに...このドキュメントに続きが書いてるね...」

Rust「(ﾋﾟﾀｯ...ｶﾀｶﾀｶﾀ...)」

Rustちゃんも気になるようだけど、「聞きながら修正する」つもりなのか再びタイピングを開始した。

前から思ってたけどRustちゃんって結構...いやかなり横着をするよね...彼女の<ruby>信条<rt>パラダイム</rt></ruby>とのギャップが激しい...

TS「ドキュメントの続き

> しかしこの2つのロジックでは足りないときがある。
> 
> 例えばチャットルームアプリを作っていて `ChatRoom` コンポーネントの表示中に接続するとする。 **チャットルームへの接続は副作用** があるけど、クリックのような **トリガとなるイベントがあるわけではない** 。

」


TS「？...接続する時にボタンを押させるだろうし少し無理がある例じゃない...？まぁいいや続き」

TS「

> **エフェクトは、特定のイベントによってではなく、レンダー自体によって引き起こされる副作用を指定するためのものである**
> サーバーへの接続はこのエフェクトによって行われる

...！」

TS「なるほど...扱える処理は、 **レンダリング自体がトリガとなるもの** って思えばいいのかな...？」

Python「特別な場合にしか使わないということ...？」

TS「ドキュメントのところどころに書かれている『 **外部システムとの同期** 』がその特別な場合みたい。」

Python「メルキオールたちとの会話は多分『フォーム送信』が近いだろうし、『同期』ではないから確かに `useEffect` を使うのは間違いだろうね」

TS「『外部システムとの同期』で他にわかりやすい例が下の方に載ってそう...なになに...？」

:::note info
本題ではないので「[エフェクトの書き方](https://ja.react.dev/learn/synchronizing-with-effects#how-to-write-an-effect)」という項目の最初の方を飛ばしました。エフェクトの依存値関係の話題は次の記事様が詳しいです。

[【React】useEffect の標準動作は「依存配列の中身が変わると実行」ではない - Qiita](https://qiita.com/honey32/items/62edf5165aced7d0c4bf)

- 「レンダリング後、常に実行が基本」
- 「配列が指定されている場合、再レンダリング時に依存値配列に含まれるすべての値に変化がなければ実行スキップ。だから(結局？)、空配列だと( `![].every((a, b) => a == b)` は 常に `false` なので)マウント時のみ実行され以降はすべてスキップ」

と考えると良い感じらしいです。
:::

# `useEffect` を使う場面

## :o: 外部システムとの同期例① 打ち消せる場合

:::note info
レンダリング時に実行され外部に副作用を与えるケース

⇒ その副作用を **クリーンアップで打ち消せる** なら `useEffect` で記述して良い
:::

TS「[チャットルームの例](https://ja.react.dev/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed)から見ていきますか」

```jsx:jsx (チャットルーム・クリーンアップなし)
import { useEffect } from 'react';
import { createConnection } from './chat.js';

export default function ChatRoom() {
  useEffect(() => {
    const connection = createConnection();
    connection.connect();
  }, []);
  return <h1>Welcome to the chat!</h1>;
}
```

TS「`useEffect`の第二引数が空配列なので、『 `ChatRoom` がマウントされた』⇒『チャットルームに繋がった』という形でマウントをトリガにしたいケースなんだね...ドキュメントの続きは...」

> このエフェクトはマウント時にのみ実行されるため、コンソールに "✅ Connecting..." が 1 回だけ表示されると思うかもしれません。しかし、コンソールを確認すると、"✅ Connecting..." が 2 回表示されているはずです。なぜこれが起こるのでしょうか？
> 
> ... (中略。外部への副作用の弊害が記載) ...
> 
> このようなバグは、手動での徹底的なテストがないと見逃しやすいものです。これらをすばやく見つけるために、開発環境では **React は、初回マウント直後にすべてのコンポーネントを一度だけ再マウントします。**

Python「 **思いっきりRustちゃんが引っかかっていた `StrictMode` の挙動の説明だ！** 」

> "✅ Connecting..." のログが 2 回表示されることで、実際の問題に気付くことができます。つまり、コンポーネントがアンマウントされたときに接続を閉じるコードがないということです。
> 
> この問題を解決するには、エフェクトからクリーンアップ関数を返すようにします。

```jsx:jsx (チャットルーム)
  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, []);
```

TS「『クリーンアップ』として `useEffect` の返り値に設定した無名関数は、(スキップされなかった)再レンダリング時と最後のアンマウント時に実行されるので、この例だとアンマウント時にのみ実行されるね。 `StrictMode` の影響で2回チャットルームに入るけど、 **最初の接続はすぐ退出されるので、問題ない** ！」ｶｷｶｷ...

![IMG_0331.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205472/073ac13a-11f7-ff45-786f-c9926ab1d942.jpeg)

Python「接続という副作用があっても、然るべきタイミングで **打ち消せている** から問題ないということか...」

Rust「今完全に理解しました... `useEffect` のクロージャが2回実行されるのは、 **副作用が起きないはずのレンダリング** をトリガにしたクロージャについて、副作用がどうしても生じる場合に **適切に対処できているか** を調べるためだったんですね...」

手を止めたRustちゃんは、心底納得した ―― 悟りでも開いたかのような ―― 顔をして言った。

Python「そして大喜利AIの場合はもちろん対処できていなくて、それをメルキオールが教えてくれていたんだな。」

TS「『覆水盆に返らず』な、`useEffect` を使ってはいけない副作用の例も下の方に載っているけど、もう一個使って問題ない例を見てみますか」

## :o: 外部システムとの同期例② そもそも副作用がないと言える場合

:::note info
レンダリングをトリガとして実行するが、 **データフェッチ等** の外部に影響を与えないケース

⇒ そのままでも問題ない。なるべくクリーンアップに処理の中止や取得したデータの破棄を入れた方が良い
:::

TS「次に問題ないのは[データフェッチの例](https://ja.react.dev/learn/synchronizing-with-effects#fetching-data)。要はレンダリングをトリガとして実行されるけど"ほぼ"副作用がない場合は、対処する必要もそこまでないので問題なさそうという感じ」

```jsx:jsx (データフェッチ)
useEffect(() => {
  let ignore = false;

  async function startFetching() {
    const json = await fetchTodos(userId);
    if (!ignore) {
      setTodos(json);
    }
  }

  startFetching();

  return () => {
    ignore = true;
  };
}, [userId]);
```

TS「フロントエンドで非同期と言えば大体データフェッチだろう[^datafetch]し、多分ChatGPTが思い描いていた非同期処理はこれなんじゃないかな...？」

[^datafetch]: 筆者は経験が浅いので嘘かもです！！！要出典です！！！

Rust「 **非同期関数かどうかで `useEffect` を使うか決めるのではなくて、どんな副作用があるかで決めるべき** だったんですね...混乱の根源がわかりました」

Python「悩んでいる問題と解決方法の着眼点が異なると、なかなかググれなくて困るよね...ChatGPTに聞いても今回みたいなことになるし」

TS「今回の例をもう少し見てみるよ。アンマウント後や `userId` が変わってもうデータが要らなくなったのに `set〇〇` が呼ばれるのを防ぐために、クリーンアップを利用してデータの破棄を行っているみたい。データを取得できるタイミングとレンダリングのタイミングはズレているだろうから、不整合を防ぐためにもあった方が良さそうだね。」

## :x: `useEffect` を使ってはいけない例「商品購入」

:::note alert
「いつ起きるか、何回起きるかがわからないレンダリング」をトリガとしてはいけない処理を、
誤って `useEffect` 内で実行してはいけない

- 書こうとしている処理が `POST` クエリ等なら立ち止まって！
:::

TS「ここまででもうわかると思うけど、クリーンアップを設定してもどうしようもならない処理、例えば商品購入やユーザー登録、」

Python「そしてAIにデータ送信！だよね？」

Rust「うっ...」

TS「Rustちゃんをいじめないで...ともかく、そういった **『覆水盆に返らず』な処理** は `useEffect` に指定しちゃだめってことだね！」

[商品購入の例](https://ja.react.dev/learn/synchronizing-with-effects#not-an-effect-buying-a-product)

```jsx:jsx
useEffect(() => {
  // 🔴 Wrong: This Effect fires twice in development, exposing a problem in the code.
  fetch('/api/buy', { method: 'POST' });
}, []);
```

TS「こういう処理は **イベントハンドラに書け** って修正例が出てる」

```jsx:jsx
function handleClick() {
  // ✅ Buying is an event because it is caused by a particular interaction.
  fetch('/api/buy', { method: 'POST' });
}
```

TS「そして、あ...」

> これで分かるのは、再マウントでアプリケーションのロジックが壊れるなら、通常それは既存のバグが明らかになったのだということです。ユーザの視点から見ると、ページを訪れることと、ページを訪れてリンクをクリックして別のページに行ってから戻るボタンを押すこととの間に、違いがあってはいけません。React は、開発環境でコンポーネントを 1 度再マウントすることで、この原則に従っていることを確認します。

Rust「 **useEffectのクロージャはバグ発見のために2回走る** って、ここにはっきり書いていたんですね...辿り付けた気持ちです」

TS「感無量だけど...`useRef`による回避は言わば例外握り潰しだったわけだね...」

# 改めて<ruby>元のコード<rt>依頼品</rt></ruby>を見てみよう

Rust「とりあえず急ぎで修正してみました！」

TS「早！どう変わったんだろう...？元々はこんな感じだったね」

```tsx:Before (OdaiElm.tsx)
// import部省略

function OdaiElm({ odai }: { odai: Message }) {
  const [melchiorAnswer, setMelchiorAnswer] = useState<Message | undefined>(
    undefined
  );
  const [balthasarAnswer, setBalthasarAnswer] = useState<Message | undefined>(
    undefined
  );
  const [casperAnswer, setCasperAnswer] = useState<Message | undefined>(
    undefined
  );

  useEffect(() => {
    (async () => {
      const context = [odai];

      const melchiorRes = await invoke<Message>("melchior", { context });
      setMelchiorAnswer(melchiorRes);
      context.push(melchiorRes);

      const balthasarRes = await invoke<Message>("balthasar", { context });
      setBalthasarAnswer(balthasarRes);
      context.push(balthasarRes);

      const casperRes = await invoke<Message>("casper", { context });
      setCasperAnswer(casperRes);
    })();
  }, [odai]);

  const userElm = <MessageElm text={odai.content} avatar={get_avatar(odai)} />;

  const melchiorElm = melchiorAnswer ? (
    <MessageElm
      text={melchiorAnswer.content}
      avatar={get_avatar(melchiorAnswer)}
    />
  ) : (
    <></>
  );

  // balthasarElm, casperElmはほぼ同じなので省略

  return (
    <Grid container>
      {[userElm, melchiorElm, balthasarElm, casperElm].map((elm, id) => (
        <Grid item key={id}>
          {elm}
        </Grid>
      ))}
    </Grid>
  );
}

export default OdaiElm;
```

<details><summary>完全版</summary>

```tsx:Before (OdaiElm.tsx)
import { useState, useEffect } from "react";
import MessageElm from "@/components/MessageElm";
import Grid from "@mui/material/Grid/Grid";
import { Message } from "@/structs";
import { get_avatar } from "@/avatar";
import { invoke } from "@tauri-apps/api/tauri";

function OdaiElm({ odai }: { odai: Message }) {
  const [melchiorAnswer, setMelchiorAnswer] = useState<Message | undefined>(
    undefined
  );
  const [balthasarAnswer, setBalthasarAnswer] = useState<Message | undefined>(
    undefined
  );
  const [casperAnswer, setCasperAnswer] = useState<Message | undefined>(
    undefined
  );

  useEffect(() => {
    (async () => {
      const context = [odai];

      const melchiorRes = await invoke<Message>("melchior", { context });

      setMelchiorAnswer(melchiorRes);
      context.push(melchiorRes);

      const balthasarRes = await invoke<Message>("balthasar", { context });

      setBalthasarAnswer(balthasarRes);
      context.push(balthasarRes);

      const casperRes = await invoke<Message>("casper", { context });

      setCasperAnswer(casperRes);
    })();
  }, [odai]);

  const userElm = <MessageElm text={odai.content} avatar={get_avatar(odai)} />;

  const melchiorElm = melchiorAnswer ? (
    <MessageElm
      text={melchiorAnswer.content}
      avatar={get_avatar(melchiorAnswer)}
    />
  ) : (
    <></>
  );

  const balthasarElm = balthasarAnswer ? (
    <MessageElm
      text={balthasarAnswer.content}
      avatar={get_avatar(balthasarAnswer)}
    />
  ) : (
    <></>
  );

  const casperElm = casperAnswer ? (
    <MessageElm text={casperAnswer.content} avatar={get_avatar(casperAnswer)} />
  ) : (
    <></>
  );

  return (
    <Grid
      container
      sx={{
        width: "100%",
        alignItems: "center",
        justifyContent: "center",
        m: "0 auto",
      }}
    >
      {[userElm, melchiorElm, balthasarElm, casperElm].map((elm, id) => (
        <Grid
          item
          xs={12}
          sx={{
            alignItems: "center",
            justifyContent: "center",
          }}
          key={id}
        >
          {elm}
        </Grid>
      ))}
    </Grid>
  );
}

export default OdaiElm;
```
</details>

Python「本来はお題確定のフォーム送信時にイベントハンドラとして動かすべき処理が、`useEffect` で指定されていたのが問題だったよね」

Rust「はい。`OdaiElm.tsx` に関しては、 `useEffect` 等のフックの使用をやめ、表示に集中したシンプルな純粋関数になるように努めました！」

```tsx:After (OdaiElm.tsx)
// import部省略

interface OdaiElmProps {
  odai: Message;
  melchiorAnswer: Message | undefined;
  balthasarAnswer: Message | undefined;
  casperAnswer: Message | undefined;
}

function OdaiElm(props: OdaiElmProps) {
  const { odai, melchiorAnswer, balthasarAnswer, casperAnswer } = props;

  const userElm = <MessageElm text={odai.content} avatar={get_avatar(odai)} />;

  const melchiorElm = melchiorAnswer ? (
    <MessageElm
      text={melchiorAnswer.content}
      avatar={get_avatar(melchiorAnswer)}
    />
  ) : (
    <></>
  );

  // 省略

  return (
    <Grid container>
      {[userElm, melchiorElm, balthasarElm, casperElm].map((elm, id) => (
        <Grid item key={id}>
          {elm}
        </Grid>
      ))}
    </Grid>
  );
}

export default OdaiElm;
```

<details><summary>完全版</summary>

```tsx:After (OdaiElm.tsx)
import MessageElm from "@/components/MessageElm";
import Grid from "@mui/material/Grid/Grid";
import { Message } from "@/structs";
import { get_avatar } from "@/avatar";

interface OdaiElmProps {
  odai: Message;
  melchiorAnswer: Message | undefined;
  balthasarAnswer: Message | undefined;
  casperAnswer: Message | undefined;
}

function OdaiElm(props: OdaiElmProps) {
  const { odai, melchiorAnswer, balthasarAnswer, casperAnswer } = props;

  const userElm = <MessageElm text={odai.content} avatar={get_avatar(odai)} />;

  const melchiorElm = melchiorAnswer ? (
    <MessageElm
      text={melchiorAnswer.content}
      avatar={get_avatar(melchiorAnswer)}
    />
  ) : (
    <></>
  );

  const balthasarElm = balthasarAnswer ? (
    <MessageElm
      text={balthasarAnswer.content}
      avatar={get_avatar(balthasarAnswer)}
    />
  ) : (
    <></>
  );

  const casperElm = casperAnswer ? (
    <MessageElm text={casperAnswer.content} avatar={get_avatar(casperAnswer)} />
  ) : (
    <></>
  );

  return (
    <Grid
      container
      sx={{
        width: "100%",
        alignItems: "center",
        justifyContent: "center",
        m: "0 auto",
      }}
    >
      {[userElm, melchiorElm, balthasarElm, casperElm].map((elm, id) => (
        <Grid
          item
          xs={12}
          sx={{
            alignItems: "center",
            justifyContent: "center",
          }}
          key={id}
        >
          {elm}
        </Grid>
      ))}
    </Grid>
  );
}

export default OdaiElm;
```
</details>

TS「とてもスッキリしたね！」

Rust「その代わり急ぎで修正したのでという言い訳をさせてもらいつつ...親要素の `App.tsx` がカオスなことになっています...」

TS「あるあるだね...後で分割しようか」

Rust「コールバックの`send`非同期関数を定義して、その中で `invoke` 等を呼んでいます。外部に `useState` フックの `set〇〇` 関数以外に依存する変数がなかったので、 `useCallback` を使い、レンダリングごとにコールバックが作成されるのを防いでみました。」

```tsx:After (親要素 App.tsx)
// import部省略

function App() {
  // 省略

  const [odai, setOdai] = useState<Message | undefined>(undefined);
  const [melchiorAnswer, setMelchiorAnswer] = useState<Message | undefined>(
    undefined
  );
  const [balthasarAnswer, setBalthasarAnswer] = useState<Message | undefined>(
    undefined
  );
  const [casperAnswer, setCasperAnswer] = useState<Message | undefined>(
    undefined
  );

  const send = useCallback(async (odai_str: string) => {
    console.log("Process Start");

    const odai = {
      character: "user",
      content: odai_str,
    };
    setOdai(odai);

    const context = [odai];

    console.log(`${context.map((m) => m.content)}`);

    const melchiorRes = await invoke<Message>("melchior", { context });

    setMelchiorAnswer(melchiorRes);
    context.push(melchiorRes);

    console.log(`${context.map((m) => m.content)}`);

    const balthasarRes = await invoke<Message>("balthasar", { context });

    setBalthasarAnswer(balthasarRes);
    context.push(balthasarRes);

    console.log(`${context.map((m) => m.content)}`);

    const casperRes = await invoke<Message>("casper", { context });

    setCasperAnswer(casperRes);

    context.push(casperRes);
    console.log(`${context.map((m) => m.content)}`);

    console.log("Process End");
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <br />
      {odai ? (
        <OdaiElm
          odai={odai}
          melchiorAnswer={melchiorAnswer}
          balthasarAnswer={balthasarAnswer}
          casperAnswer={casperAnswer}
        />
      ) : (
        <></>
      )}
      <Grid container>
        <Grid item>
          <PromptFieldElm send={send} />
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}

export default App;
```

<details><summary>完全版</summary>

```tsx:After (親要素 App.tsx)
import { useState, useCallback } from "react";
import PromptFieldElm from "@/components/PromptFieldElm";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useMemo } from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import OdaiElm from "@/components/OdaiElm";
import Grid from "@mui/material/Grid/Grid";
import { Message } from "@/structs";
import { invoke } from "@tauri-apps/api/tauri";

function App() {
  // https://amateur-engineer.com/react-mui-dark-mode/
  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
  const theme = useMemo(
    () =>
      createTheme({
        palette: {
          mode: prefersDarkMode ? "dark" : "light",
        },
      }),
    [prefersDarkMode]
  );

  const [odai, setOdai] = useState<Message | undefined>(undefined);
  const [melchiorAnswer, setMelchiorAnswer] = useState<Message | undefined>(
    undefined
  );
  const [balthasarAnswer, setBalthasarAnswer] = useState<Message | undefined>(
    undefined
  );
  const [casperAnswer, setCasperAnswer] = useState<Message | undefined>(
    undefined
  );

  const send = useCallback(async (odai_str: string) => {
    console.log("Process Start");

    const odai = {
      character: "user",
      content: odai_str,
    };
    setOdai(odai);

    const context = [odai];

    console.log(`${context.map((m) => m.content)}`);

    const melchiorRes = await invoke<Message>("melchior", { context });

    setMelchiorAnswer(melchiorRes);
    context.push(melchiorRes);

    console.log(`${context.map((m) => m.content)}`);

    const balthasarRes = await invoke<Message>("balthasar", { context });

    setBalthasarAnswer(balthasarRes);
    context.push(balthasarRes);

    console.log(`${context.map((m) => m.content)}`);

    const casperRes = await invoke<Message>("casper", { context });

    setCasperAnswer(casperRes);

    context.push(casperRes);
    console.log(`${context.map((m) => m.content)}`);

    console.log("Process End");
  }, []);

  return (
    <ThemeProvider theme={theme}>
      <br />
      {odai ? (
        <OdaiElm
          odai={odai}
          melchiorAnswer={melchiorAnswer}
          balthasarAnswer={balthasarAnswer}
          casperAnswer={casperAnswer}
        />
      ) : (
        <></>
      )}
      <Grid
        container
        sx={{
          position: "absolute",
          bottom: "0",
          width: "100%",
          padding: "20px",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Grid
          item
          xs={12}
          sx={{ alignItems: "center", justifyContent: "center" }}
        >
          <PromptFieldElm send={send} />
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}

export default App;
```
</details>

Python「ぶっちゃけ `OdaiElm.tsx` に書いていた処理をそのまま持ってきた感じだな...」

Rust「コードの整理は追々...とりあえず動くものができましたし、実行してみた感じ2回呼ばれているみたいなことはなさそうです！」

![App.tsx:36 Process Start
App.tsx:46 お題「超ブラックな学園祭！どんな学園祭？」
App.tsx:53 お題「超ブラックな学園祭！どんな学園祭？」,Melchiorが回答します。監獄エスケープルームやゾンビカフェ、そしてアクセサリー作りのワークショップもある、超ブラックな学園祭です！
App.tsx:60 お題「超ブラックな学園祭！どんな学園祭？」,Melchiorが回答します。監獄エスケープルームやゾンビカフェ、そしてアクセサリー作りのワークショップもある、超ブラックな学園祭です！,Balthasarが回答します。死神とのカラオケ対決や「最も不吉な占い」ブースなど、超ブラックな学園祭です！
App.tsx:67 お題「超ブラックな学園祭！どんな学園祭？」,Melchiorが回答します。監獄エスケープルームやゾンビカフェ、そしてアクセサリー作りのワークショップもある、超ブラックな学園祭です！,Balthasarが回答します。死神とのカラオケ対決や「最も不吉な占い」ブースなど、超ブラックな学園祭です！,Casperが回答します。生徒たちがハロウィンの仮装で授業に参加する、超ブラックな学園祭です！
App.tsx:69 Process End](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205472/f864c8c8-f0cf-86d2-a38d-8db7c8d7a3c3.png)

# エピローグ

TS「コールバックの名前が `send` なのが改善点かも...？このコールバック関数って送信だけじゃなくて結果の受け取りもしちゃっているよね。」

Rust「元のコードは `odai` 変数を確定させているだけでシンプルだった部分ですね...」

TS「全部の回答を受け取るまで実行される...うーん、非同期関数の実行時間は短くしたいかも」

Rust「ちょうど今<ruby>バックエンド<rt>わたし</rt></ruby>側でお題と回答をキャッシュできるように作り替えていたところです！だから出題をIDで管理すれば...」

TS「お題とIDを<ruby>バックエンド<rt>Rustちゃん</rt></ruby>側に投げてさっさと `return` してしまって、<ruby>フロントエンド<rt>わたし</rt></ruby>側は何か他のタイミングで回答を取得できればいいね！」

Rust「Tauri APIに`listen`という、<ruby>バックエンド<rt>こっち</rt></ruby>側から投げたイベントを受け取れるコールバック設定関数があるので、この関数と返り値で渡される `unlisten` クリーンアップ関数を使えば...」

TS「どこかのコンポーネントの `useEffect` でイベントをリッスンするようにして解決だ...！」

Python「(議論が白熱してるな...！...私もラボでAIの改良をしよう)」

...

...

Rust「その...TypeScriptちゃん...」

TS「ん？」

Rust「...フロントエンドの方、実装の続きをお願いしたくて...良いでしょうか...？」

TS「もちろん！一緒にやろ！」

そして本祭まで、私達の戦いは続くのだった...

～ fin ～

# あとがき

えー、最初に謝ります...

**ごめんなさい！！！！**

なぜ謝ったかというと、小説スタイルではなくまともな技術記事ベースの方が多分読みやすかったからです！！

しかし[前回](https://qiita.com/namn1125/items/2d84086394e97489776a)同様、[Tauriまとめ記事](https://qiita.com/namn1125/items/8ed4d91d3d00af8750f8)の「TypeScriptとRustがペアプロする物語が書きたい！」という思いをまたまたこらえきれず、小説スタイルで書いてしまいました...

↓　ﾖｶｯﾀﾗﾖﾝﾃﾞﾐﾃﾎｼｲﾃﾞｽ

https://qiita.com/namn1125/items/8ed4d91d3d00af8750f8

なぜこらえきれなかったかというと、前回はたしかにペアプロはさせられたのですが、結局「Tauriを」題材にできたわけではなく、それでモヤモヤしていたからです...不完全燃焼だったんですね。

今回の記事を書いた技術的経緯の方は(自分の中では)結構しっかりしていると信じたいです。直感ですが、「Tauriみたいに、**Reactで非同期で変なことをする** 状況はそんなになくて、大体はデータフェッチとかばかり」なんじゃないかなと思います。そこで「あんまり情報が落ちていないのではないか」という動機から書きました。筋は通っているはず()

Tauriを使えば例えばIoT用のリモコンを作ったり、OSが提供するAPIと連携させてみたり、何したりと、Reactの域を超えて色々なことができます。そのため、今回のような非同期に関する落とし穴についての記事はきっと需要があるのではないかと思います。Tauriが気になった方は是非やってみてほしいです！

筆者は、フロントエンド(特にReact)はまだまだにわかな部分がありますので、間違い等ございましたら是非コメント等していただけると幸いです。

ここまで読んでいただき誠にありがとうございました！

# 参考

- [参照透過性 - Wikipedia](https://ja.wikipedia.org/wiki/%E5%8F%82%E7%85%A7%E9%80%8F%E9%81%8E%E6%80%A7)
    - 他の資料も色々見たのですが冒頭で「その式をその式の値に置き換えてもプログラムの振る舞いが変わらない」という記述ではっきり目的を示してくれていたのが良かったです。 

# 実行環境

- tauri: 1.4
- cargo: 1.69.0
- yarn: 1.22.19
- tauri-cli: 1.4.0

<details><summary>バージョン確認詳細</summary>

```PowerShell
> rustup --version
rustup 1.26.0 (5af9b9484 2023-04-05)
info: This is the version for the rustup toolchain manager, not the rustc compiler.
info: The currently active `rustc` version is `rustc 1.69.0 (84c898d65 2023-04-16)`
> cargo --version
cargo 1.69.0 (6e9a83356 2023-04-12)
> node -v
v18.4.0
> npm -v
8.13.1
> yarn -v
1.22.19
> cd tauri-project
> yarn tauri --version
yarn run v1.22.19
$ tauri --version
tauri-cli 1.4.0
Done in 0.15s.
```
</details>