React Hook "useEffect" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.エラーが出る

はじめに

Reactでコードを書いていた際にエラーが発生しました。
原因と解決策を記録として残します。

問題

useState や useEffect をコンポーネント関数の外に書いたとき発生しました。

React Hook "useEffect" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.

React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.

解決方法

「useState」 と 「useEffect」 を 「function App() 」の内側に移動したら解消しました。

Reactは内部でHooksの呼び出し順序を使って状態を管理しているため、コンポーネント外での呼び出しは動作が保証できず、禁止されているようです。

修正前

//  NG：関数コンポーネントの外
const [games, setGames] = useState<Game[]>([]);

useEffect(() => { ... }, []);

function App() {
  return <></>;
}

修正後

//  OK：関数コンポーネントの内側
function App() {
  const [games, setGames] = useState<Game[]>([]);

  useEffect(() => { ... }, []);

  return <></>;
}

おわりに

今まで何となくそうゆうものだと思って、関数コンポーネントの内側にHooksを記載していました。なぜ関数コンポーネントの内側にHooksを書かないといけないのを理解するいい機会になりました！

参考