Cannot update a component while rendering a different component. Probably due to bad setState()
See original GitHub issueDescribe the bug React issues a warning about bad setState when the Carousel component is used
To Reproduce Steps to reproduce the behavior:
- Install
10.2.0
- Install
react-carousel 2.0.3
- Dynamic import the carousel component like so (as NextJS SSR crashes using normal import)
import dynamic from 'next/dynamic';
const Carousel = dynamic(
() => import('@brainhubeu/react-carousel'),
{ ssr: false },
);
- Use the carousel
- See error in Chrome console
Expected behavior A clear and concise description of what you expected to happen.
Screenshots
Environment
System:
OS: Windows 10 10.0.19042
CPU: (4) x64 Intel(R) Core(TM) i5-7600 CPU @ 3.50GHz
Memory: 1.43 GB / 7.94 GB
Binaries:
Node: 16.0.0 - C:\Program Files\nodejs\node.EXE
npm: 7.10.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 90.0.4430.212
Edge: Spartan (44.19041.906.0), Chromium (90.0.818.56)
Internet Explorer: 11.0.19041.1
npmPackages:
@brainhubeu/react-carousel: 2.0.3 => 2.0.3
Issue Analytics
- State:
- Created 2 years ago
- Comments:7
Top Results From Across the Web
Cannot update a component while rendering a different ...
I fixed this issue by removing the dispatch from the register components render method to the componentwillunmount method. This is because ...
Read more >Cannot update a component (`xxx`) while rendering ...
The Batcher 's component's setState is the state setter that is being called, and the main cause is because replaceState from RecoilRoot is ......
Read more >Cannot update a component while rendering a different ...
The fix is fairly simple. Just wrap the condition check in the useEffect. This hook basically tells React that the component has to...
Read more >react native cannot update a component while rendering ...
In short, you cannot call parent's setState() outside useEffect() while in first rendering, or the error message will come up. Open side panel....
Read more >Drum Machine / Cannot update a component (`App`) while ...
Warning: Cannot update a component ( App ) while rendering a different component ( Pad ). To locate the bad setState() call inside...
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 FreeTop 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
Top GitHub Comments
Hi, sorry I abandoned this in favor of https://github.com/akiran/react-slick that just seems to work our of the box
Hi Shaun. Do you use dynamic import via
'next/dynamic'
? Would you be able to post a screenshot or a snippet of your code? Thank you