要点まとめ
- Reactは
useEffect、VueはonMountedとonUnmountedで登録と解除を行う - 登録は1回だけ。依存配列やリアクティブ値の更新で再登録しない
- 解除は
AbortController経由で行い、コンポーネント破棄と必ずセットにする
Reactでの実装
TypeScriptReact
useEffect(() => {
const controller = new AbortController();
registerSearchTool(controller.signal).catch(() => undefined);
return () => controller.abort();
}, []); // 依存配列は空。再登録を起こさないuseEffectの依存配列にexecute関数などのオブジェクトを入れると、 再レンダーのたびに再登録が走ります。ツール定義は静的にし、どうしても最新値が必要な場合はuseRef経由で参照します。
Vueでの実装
JavaScriptVue 3 Composition API
import { onMounted, onUnmounted } from "vue";
let controller;
onMounted(() => {
controller = new AbortController();
registerSearchTool(controller.signal).catch(() => undefined);
});
onUnmounted(() => {
controller?.abort();
controller = undefined;
});Vueではwatchでツール定義を監視したくなりますが、登録の再実行は避けてください。 変更が必要なのはexecuteの中身だけで、ツールの名前とSchemaは安定させるべきです。
比較と共通原則
| 観点 | React | Vue |
|---|---|---|
| 登録タイミング | useEffect(空配列) | onMounted |
| 解除タイミング | cleanup関数 | onUnmounted |
| 再登録の回避 | 依存配列を空にする | watchで登録しない |
| 最新値の参照 | useRef | shallowRef + 非監視アクセス |
- ツール名・説明・Schemaはページのライフサイクル中で不変にする
- SPAのルーティング遷移時は、前のページのツールを必ず解除する
- 状態表示はマウント後の値で確定させ、SSR不一致を起こさない
次に読む
Next.jsガイドへ Next.jsでの実装詳細
App Router特有のSSRとハイドレーションの注意点を確認できます。