「React Hook useState is called conditionally」のエラー回避方法

エラー「React Hook useState is called conditionally」

先日、Next.js のプロジェクトを Vercel 上にデプロイしようとしたら、以下のエラーが出ました。

Failed to Compile Error: React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks

if 文の中で useState を呼ぶなという意味でしょうが、まったく心当たりがありません 🤔

問題のあるコード

問題があったのは、以下のようなコードでした。

page.tsximport { notFound } from "next/navigation";

export default function SampleComponent() {
  const  hoge: string | undefined = undefined

  if (hoge) {
    return notFound();
  }

  const [fooState, setFooState] = useState();

  return (
    <>Component</>
  )
}

一見、useState は if 文(Conditional statement)の中で宣言されていないように見えます。

しかし、上記のコードは、以下のようにも捉えることができます。

page.tsximport { notFound } from "next/navigation";

export default function SampleComponent() {
  const  hoge: string | undefined = undefined

  if (hoge) {
    return notFound();
  } else {
    // useStateが条件式の中に入っている！！！
    const [fooState, setFooState] = useState();

    return (
        <>Component</>
    )
  }
}

これだと、useState の宣言が if 文の中に入ってしまっているので、コンパイルエラーになるようです。

解決策

useState の宣言場所を変えるだけで解決します。

page.tsximport { notFound } from "next/navigation";

export default function SampleComponent() {
  const  hoge: string | undefined = undefined

  // 条件式の上で宣言する
  const [fooState, setFooState] = useState();

  if (hoge) {
    return notFound();
  }

  return (
    <>Component</>
  )
}