wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.16k stars 106 forks source link

Crash when using with React.Suspense #67

Closed christiankaindl closed 5 years ago

christiankaindl commented 5 years ago

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>

Any ideas?

stale[bot] commented 5 years ago

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.