Skip to content

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

Closed
@tory37

Description

@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?
  1. 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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions