【React】ReferenceError: Cannot access 'HogeState' before initializationの対処方法

症状

reactでnpmstartしたとき、以下エラーメッセージが表示されました。 翻訳すると、「ReferenceError：初期化前に「HogeState」にアクセスできません」でした。

エラーメッセージ

Uncaught ReferenceError: Cannot access 'HogeState' before initialization
    at Hoge(Hoge.js:19)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at scheduleUpdateOnFiber (react-dom.development.js:21881)
    at updateContainer (react-dom.development.js:25482)
    at react-dom.development.js:26021
    at unbatchedUpdates (react-dom.development.js:22431)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:7)
    at Module../src/index.js (index.js:18)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (index.js:41)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

該当のファイルは以下になります。

Hoge.jsx

import React from "reacrt";

export const Hoge = () => {
   console.log(HogeState);
   const HogeState ~ "HOGE";
   return(
     <div>HogeState</div>
   )

}

解決方法

変数の宣言個所と参照個所を逆にすることで解決できました。 変数の宣言前にその変数を参照すると、このようなエラーが出るようです。

Hoge.jsx

import React from "reacrt";

export const Hoge = () => {
   const HogeState ~ "HOGE";
   console.log(HogeState);

   return(
     <div>HogeState</div>
   )

}

参考