Description
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
- Use create react app to create a new app
- Create a new hook or functional component
- inside hook or component, Write a for - of loop that contains an if else statement. The if else can be empty
- write any useEffect after the for loop
- 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?
- 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