Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.（メモ）

エラー内容

下記のエラーは、別コンポーネントをレンダリングしたい時、他の値を返す可能性のある条件の後にhooksを使用すると発生します

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

≈

エラーが発生する例

import React, { useState } from 'react'

export default function App() {
  const [loading, setLoading] = useState()

  // 👇エラー発生原因
  if (loading) {
    <p>Loading...</p>
  }
  const [count, setCount] = useState(0)

  return (
    <div>
      <span>{count}</span>
      <button onClick={(e) => setCount(count => count + 1)}>ボタン</button>
    </div>
  )
}

正常なコード

useStateの下に置く。
コンポーネントがレンダリングされるたびにReactフックが同じ順序で呼び出されるようにする必要があるため、これによりエラーが解決されます。ループ、条件、またはネストされた関数内でフックを使用できない。

import React, { useState } from 'react'

export default function App() {
  const [loading, setLoading] = useState()
  const [count, setCount] = useState(0)

  // 👇
  if (loading) {
    <p>Loading...</p>
  }

  return (
    <div>
      <span>{count}</span>
      <button onClick={(e) => setCount(count => count + 1)}>ボタン</button>
    </div>
  )
}

参照
Rules of Hooks