this.options is undefined during conditional rendering

[joelhoelting]

I noticed that the CPU load is pretty high when the particles are rendering. In order to give the user a more lightweight experience I decided to conditionally render the particles only when the particle div is visible. I am getting an error within the react-particles-js library during conditional rendering:

TypeError: this.options is undefined

Here is some sample code:

<Container name="landing">
      {particlesActive && (
        <Particles
          params={{
            particles: {
              number: {
                value: 60,
                density: {
                  enable: true,
                  value_area: 1500
                }
              },
              line_linked: {
                enable: true,
                opacity: 0.02
              },
              move: {
                speed: 1,
                attract: {
                  enable: true,
                  rotateX: 3000,
                  rotateY: 3000
                }
              },
              size: {
                value: 2
              },
              opacity: {
                anim: {
                  enable: true,
                  speed: 1,
                  opacity_min: 0.05
                }
              }
            },
            interactivity: {
              events: {
                onHover: {
                  enable: true,
                  mode: 'grab'
                }
              },
              modes: {
                grab: {
                  distance: 180,
                  line_linked: {
                    opacity: 0.5
                  }
                }
              }
            },
            retina_detect: true
          }}
        />
      )}
</Container>

Github repo source: Github Repo

The issue is coming from the tsparticles library and I've isolated the error to react-particles-js/node_modules/tsparticles/dist/Core/Container.js.

I am trying to figure out the root of the issue. In the meantime, does anyone know why this is occurring or a know of a better way to conditionally render a particle component in react?

[matteobruni]

You can try to play/pause instead of conditional rendering if you want. The container property described in the readme was added for using those methods. Anyway I’ll try to reproduce the issue to find a solution in this case

[joelhoelting]

@matteobruni Thank you for the response, I am trying to access the particlesRef within React hooks in order to utilize the container functions. Is there an example of how to do this? I will be happy to PR to the docs with an example once I figure it out.

[matteobruni]

You can find some code from the author of the PR that added that property here:

https://github.com/crutchcorn/gitshark-website/blob/2c53f2ae2f9f8a05cb715cf32e915d70ff2ba361/src/components/shark-background/shark-background.jsx

He uses that property in a button, probably it's something useful for you too

[joelhoelting]

@matteobruni Re: the conditional rendering of the particles container: this.options is undefined only occurs in the browser sometimes. It does not happen every time. It happens like every 1/5 times, perhaps it is because this.options is being called before the particles component has fully rendered?

I have reached out to @crutchcorn re: accessing the particlesRef inside of a useEffect hook. I am still struggling to implement particlesRef (see below) but once I figure it out I will definitely submit a PR to the docs to provide an example for others on how to achieve this.

Here is my failed implementation that I put together after looking at the code written by @crunchcorn posted above:

File in question (Line 115): https://github.com/joelhoelting/joel-hoelting-personal-site/blob/develop/src/components/pages/home/landing/index.js

particlesRef.current is undefined

[crutchcorn]

First: I really like what you're doing with the website @joelhoelting!

Secondly: I've double-checked your project, and I believe it's due to an outdated version of react-particles-js is installed. I updated the package to 3.2.1 and the console.log now works perfectly.

[joelhoelting]

@crutchcorn Wow, that's a little embarrassing...

Thanks for taking a look at my code, the good work and the compliment! I can access the container object now.

[crutchcorn]

Glad to hear! Don't sweat it, we all make those mistakes from time-to-time. I think I've even done that for this project in particular 😄

[stale[bot]]

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.