Javascriptのライブラリ、フレームワークにReact、Next.jsがありますがそれぞれ関数を効率よく機能させるために使うhooksがありますよね？
今回は自分にとっても学習と参考用までに使い方を解説してみます。
🔁 フック（Hooks）とは？
Reactの機能で、コンポーネント内で
状態（state）を使う → useState
ライフサイクル処理 → useEffect
アニメーションや座標更新など → useFrame（React Three Fiber）
モデルの読み込み → useGLTF（drei）
などを使うときに「フック」として書きます。
✅ フックを書く場所（大原則）
function MyComponent() {
// ✅ OK：関数の最上部に書く
const [count, setCount] = useState(0)
// ❌ NG：if 文やループの中では使えない
if (count > 0) {
// useState() ←ここに書いたらエラー！
}
return <button onClick={() => setCount(count + 1)}>+</button>
}
🧠 なぜ関数の中に書くの？
Reactは「フックの呼び出し順」によって状態を管理しています。
そのため、必ず「関数コンポーネントのトップレベル（直下）」に書く必要があります。
🦋 たとえばさっきの例：
function FlyingButterfly({ seed = 0 }) {
const ref = useRef()
const { scene } = useGLTF('/models/small.glb')
useFrame(() => { /* アニメーション処理 */ })
return <primitive ref={ref} object={scene.clone()} />
}
このように、
useRef（参照）
useGLTF（モデル読み込み）
useFrame（毎フレームの動き）
はすべて関数の中かつトップレベルに書いています。
🔒まとめ
書く場所 書いてOK？ 備考
関数の中 ✅ OK 関数コンポーネント内のトップで使う
if 文の中 ❌ NG 条件分岐やループの中では使わない
関数の外 ❌ NG フックは React の実行管理外になる
