はじめに
ReactでイベントハンドラやuseEffect、コールバック関数を記述するときによく出てくる以下の3パターン：
doSomething
() => doSomething()
doSomething()
一見似ていますが、それぞれ意味や挙動が異なり、使う場面を間違えるとバグの原因になります。この記事では、それぞれの違いとReactでの正しい使い分け方を解説します。
1. doSomething：関数そのものを渡す
<button onClick={doSomething}>Click</button>
- これは「
doSomethingという関数を実行せずにそのまま渡す」意味になります。 -
onClickなどイベント発火時にReactが関数を呼び出します。 - おすすめ：イベントハンドラやコールバック関数として使うとき
2. doSomething()：関数を即座に実行して、その戻り値を渡す
<button onClick={doSomething()}>Click</button> // ❌ NG
- この書き方は、レンダリング中に関数が実行されるという意味です。
-
onClickには関数ではなく、「関数の戻り値」が渡されてしまいます。 - ほとんどのケースでReactが期待するのは関数そのものなので、これは間違った使い方になります。
例：NGな使い方（即時実行）
useEffect(doSomething(), []); // ❌ useEffect実行時にdoSomething()が実行され、戻り値が使われる
3. () => doSomething()：ラップされた関数（無名関数）
<button onClick={() => doSomething()}>Click</button>
- 無名関数を作って、それが実行されたときに
doSomething()を呼び出すという意味。 - 引数を渡したいときや、関数を条件付きで実行したいときに使います。
例：引数を渡したい場合
<button onClick={() => doSomething("Hello")}>Click</button>
例：useEffect内で関数を呼びたい
useEffect(() => {
doSomething();
}, []);
✅ まとめ：どう使い分ける？
| 書き方 | 説明 | よく使う場面例 |
|---|---|---|
doSomething |
関数をそのまま渡す。実行はしない。 |
onClick, setTimeout, useEffect(fn)など |
doSomething() |
関数をすぐ実行し、その戻り値を渡す | 意図的に即時実行したいとき以外は避ける |
() => doSomething() |
ラップして遅延実行。引数が必要なときや条件付きで使いたいときに便利 |
onClick, useEffect内で副作用を実行 |
補足：よくあるミスとデバッグヒント
-
レンダリング時に関数が勝手に実行される →
doSomething()を書いてしまっていないか確認 - 意図通りに動かないイベント → 無名関数で引数を渡し忘れていないか確認
おわりに
Reactを使い始めたばかりの頃は、doSomethingとdoSomething()の違いがわからず、意図しない動作で苦労することがよくあります。しかし、「渡すのか」「実行するのか」「包むのか」 を意識することで、使い分けはすぐに身につきます。
ぜひこの記事を参考に、自信を持ってイベントハンドラや副作用のコードを書いていきましょう！