はじめに
⚠️ この違いは当たり前といえば当たり前なんですけど、VueとReactを両方触ってると、この違いがごっちゃになってときどき混乱することがあるので整理します＞＜
🤔 「あれ？Reactの関数毎回呼ばれてね？」「ん、Vueのsetupが再描画で呼ばれてない？」
VueからReactに移行したときにまず引っかかるのがこれ。Vueのsetup()はコンポーネントの初回初期化時に一度しか呼ばれないけど、Reactだと関数コンポーネントは再描画のたびに呼び出される。これで混乱する人も多い。
逆にReactからVueに移行してきた人は、setupが初回の1回しか呼ばれないことに驚くことも多い。
🔥 Vueのsetup()は初回だけ
Vue 3のComposition APIで導入されたsetup()は、コンポーネントの生成時に一度だけ呼び出される。
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
count.value++;
}
</script>
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">+1</button>
</div>
</template>
setup()はコンポーネントの初回生成時にだけ実行されるから、どんだけ再描画されようがsetup()は呼ばれない。countの変更で再描画はされるけど、setup()はもう一度実行されない。
🔁 Reactは毎回関数が呼ばれる
一方でReactの関数コンポーネントは再描画のたびに関数そのものが再実行される。
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
console.log('Counterが呼ばれた！');
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
この場合、ボタンを押すたびにCounter関数が再実行される。だからコンソールには毎回Counterが呼ばれた！が表示される。
🎯 なんでこうなってんの？
この違いは、VueとReactの描画モデルの違いから来てる。
🟢 Vue → 初回時にリアクティブ変数を登録
Vueはリアクティブ変数をsetup()内で初期化し、Vueのリアクティブシステムがその変数の変更を検知して再描画をトリガーする仕組み。setup()は最初だけ呼び出され、あとはリアクティブシステムが勝手にいい感じにやってくれる。
🔵 React → 関数そのものが状態
Reactは関数コンポーネント自体が状態を持ってる感じ。再描画のたびに関数が呼び出されて最新の状態を取得する。
🛠️ メンタルモデルの違い
Vueは再描画抑制を勝手にやってくれるから、開発者は「初回だけの処理」を意識するだけで済む。でもReactは関数自体が毎回呼ばれるから、「毎回関数が再実行される」という前提で書かないといけない。このメンタルモデルの違いが結構デカい。
⚠️ VueとReactを両方使っていると混乱しやすい
仕事でVueとReactを両方触ってると、この違いに混乱することが多い。Vue感覚でReactを書いて「初回だけのつもりが毎回呼ばれる」とか、React感覚でVueを書いて「再描画されるはずなのにされない」みたいなミスが頻発する。特に新人はここでつまずきやすいから注意だ。
🚀 React 19で変わること
注意点として、React 19では、この描画モデルにいくつか変更が加えられている。
🛠️ React Compilerで自動最適化
React 19では新たにReact Compilerが導入される。このコンパイラは再レンダリングを自動で最適化するため、パフォーマンス改善が期待できる。
いちいちuseMemoやuseCallbackを書かなくてもよくなるらしい
🎮 ゲームで例えると
Vue → RPGのステータス画面
setup()はキャラ作成時にステータスを設定するみたいなもん。名前や初期ステータスを決めたら、以降はそのステータスを元に戦闘とかする。再描画されてもキャラ作成はしない。
React → ローグライクの毎回初期化
関数コンポーネントはローグライクゲームでダンジョンに入るたびに装備が初期状態になるような感じ。毎回初期化されるけど、状態管理フック（useState）が保持してくれるから、見た目上は維持される。
✅ まとめ
- Vueの
setup()→ 初回だけ呼ばれる - Reactの関数コンポーネント → 再描画のたびに関数が再実行
- 描画モデルとメンタルモデルが異なる
- Vueは再描画抑制を勝手にやってくれるから楽
- Reactは毎回関数が呼ばれる前提でコードを書く必要がある
- VueとReactを両方触ってると、この違いで混乱しやすい
- React 19では自動最適化がかかる！
この違いを理解しとかないと、特にVueからReactに乗り換えたときにバグりやすいから注意！👍