Compilation error when hook called specifically after a for - of loop that contains an if - else statement

[tory37]

Describe the bug

Compilation error when calling a hook specifically after a for - of loop that contains an if - else block
Error: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

Did you try recovering your dependencies?

Npm version: 6.13.4

Environment

Environment Info:

current version of create-react-app: 3.4.1
running from /Users/thebert/.npm/_npx/55387/lib/node_modules/create-react-app

System:
OS: macOS 10.15.2
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
Yarn: Not Found
npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
Browsers:
Chrome: 81.0.4044.129
Firefox: Not Found
Safari: 13.0.4
npmPackages:
react: ^16.13.1 => 16.13.1
react-dom: ^16.13.1 => 16.13.1
react-scripts: 3.4.1 => 3.4.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. Use create react app to create a new app
2. Create a new hook or functional component
3. inside hook or component, Write a for - of loop that contains an if else statement. The if else can be empty
4. write any useEffect after the for loop
5. run npm start, and notice a compilation error

• React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

6. Remove for loop, or if else inside for loop, or move if outside of for loop, and see the errors dissappear

Expected behavior

No compilation error

Actual behavior

Compilation Error: - React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? Can be seen by running npm start in provided demo

Reproducible demo

https://github.com/tory37/create-react-app-compilation-error

Example bugged code is in App.js

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.