I wanted to optimize my web app with Code Splitting by using the new React.lazy and React.Suspense (I am useing react version 16.6.3). But apparently, when trying to use it with react-particles I get the following error
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at invariant (react-dom.development.js:55)
at scheduleWork (react-dom.development.js:18406)
at Object.enqueueSetState (react-dom.development.js:12313)
at t../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:372)
at t.value (particles.js:1)
at t.value (particles.js:1)
at commitLifeCycles (react-dom.development.js:15976)
at commitAllLifeCycles (react-dom.development.js:17262)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at commitRoot (react-dom.development.js:17458)
at completeRoot (react-dom.development.js:18912)
at performWorkOnRoot (react-dom.development.js:18841)
at performWork (react-dom.development.js:18749)
at performSyncWork (react-dom.development.js:18723)
at requestWork (react-dom.development.js:18592)
at retrySuspendedRoot (react-dom.development.js:18288)
at wrapped (scheduler-tracing.development.js:204)
It works with all other components except react-particles, although I am not 100% sure this is a issue on react-particles side.
Here's the code I used:
/* At top level */
const Particles = React.lazy(() => import('react-particles-js'))
/* In render () */
<Suspense fallback={<Spinner />}>
<Particles className='particles-js' params={particlesConfig} />
</Suspense>
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
I wanted to optimize my web app with Code Splitting by using the new React.lazy and React.Suspense (I am useing react version 16.6.3). But apparently, when trying to use it with react-particles I get the following error
It works with all other components except react-particles, although I am not 100% sure this is a issue on react-particles side.
Here's the code I used:
Any ideas?