React 16.9 compatibility issues - Infinite Render Loop warning.
See original GitHub issueSo far, I’ve only experienced this in the tests, but I guess this will be hitting people in the wild, too.
As I’m on holiday and not near a project using react-async I can’t confirm this for production use. Also, this is just a report, as I just don’t have the time to get at the core of this right now. Sorry!
- the tests are not running with 16.9
- updating the @testing-library/react to the current version makes tests run again
- BUT: From that point on, tests are flooding with the new Infinite-Loop-Detection-Warning introduced with react 16.9 ( I patched console.error to get the stack trace ):
console.error jest.setup.js:20
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
in Fetch Error:
at CustomConsole.console.error (/home/weber/tmp/react-async/jest.setup.js:18:11)
at warningWithoutStack (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:545:32)
at warning (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:2853:27)
at checkForNestedUpdates (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:23124:7)
at scheduleUpdateOnFiber (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:21389:3)
at dispatchAction (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:15816:5)
at /home/weber/tmp/react-async/packages/react-async/src/reducer.js:62:11
at dispatch (/home/weber/tmp/react-async/packages/react-async/src/useAsync.js:97:26)
at cancel (/home/weber/tmp/react-async/packages/react-async/src/useAsync.js:105:26)
at commitHookEffectList (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:19986:26)
at commitPassiveHookEffects (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:20016:11)
at HTMLUnknownElement.callCallback (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:347:14)
at invokeEventListeners (/home/weber/tmp/react-async/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
at HTMLUnknownElementImpl._dispatch (/home/weber/tmp/react-async/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
at HTMLUnknownElementImpl.dispatchEvent (/home/weber/tmp/react-async/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
at HTMLUnknownElementImpl.dispatchEvent (/home/weber/tmp/react-async/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
at HTMLUnknownElement.dispatchEvent (/home/weber/tmp/react-async/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
at Object.invokeGuardedCallbackDev (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:397:16)
at invokeGuardedCallback (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:454:31)
at flushPassiveEffectsImpl (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:22868:7)
at unstable_runWithPriority (/home/weber/tmp/react-async/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:643:12)
at runWithPriority$2 (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:11305:10)
at flushPassiveEffects (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom.development.js:22841:10)
at Object.<anonymous>.flushWork (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom-test-utils.development.js:951:10)
at act (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1062:9)
at act (/home/weber/tmp/react-async/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1418:12)
at render (/home/weber/tmp/react-async/node_modules/@testing-library/react/dist/index.js:82:26)
at _callee4$ (/home/weber/tmp/react-async/packages/react-async/src/useAsync.spec.js:150:5)
at tryCatch (/home/weber/tmp/react-async/node_modules/regenerator-runtime/runtime.js:45:40)
at Generator.invoke [as _invoke] (/home/weber/tmp/react-async/node_modules/regenerator-runtime/runtime.js:271:22)
at Generator.prototype.(anonymous function) [as next] (/home/weber/tmp/react-async/node_modules/regenerator-runtime/runtime.js:97:21)
at asyncGeneratorStep (/home/weber/tmp/react-async/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (/home/weber/tmp/react-async/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
at /home/weber/tmp/react-async/node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7
at new Promise (<anonymous>)
at Object.<anonymous> (/home/weber/tmp/react-async/node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12)
at Object.asyncJestTest (/home/weber/tmp/react-async/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
at resolve (/home/weber/tmp/react-async/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
at new Promise (<anonymous>)
at mapper (/home/weber/tmp/react-async/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
at promise.then (/home/weber/tmp/react-async/node_modules/jest-jasmine2/build/queueRunner.js:73:41)
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
How to solve the React useEffect Hook's infinite loop patterns
Solve the issue of infinite loops when using the useEffect Hook in React to more smoothly utilize the Hook for your app's side...
Read more >React v16.9.0 and the Roadmap Update
So we are deprecating this pattern in 16.9 and logging a warning if ... An infinite loop caused by setState in useEffect now...
Read more >How to Solve the Infinite Loop of React.useEffect()
1.1 Fixing dependencies ... The infinite loop is fixed by correct management of the useEffect(callback, dependencies) dependencies argument.
Read more >React17, or how to get rid of “componentWillReceiveProps”?
componentWillUpdate() is invoked just before rendering when new props or state are being received. Use this as an opportunity to perform ...
Read more >React (JavaScript library) - Wikipedia
js. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

I happen to be on holiday as well so I won’t be able to take a good look for at least another week. I did encounter some issues with the tests as 16.9 came along, but luckily upgrading all the other libs as well fixed that. I wouldn’t be surprised if there is be another update which resolves this.
By the way tests are failing on Travis but succeeding on CircleCI.
Oh, and good holidays to you! 😃