Particles re-rendering on state change of parent component

[dbaileydev]

I currently have a wrapping particles container rendered in a separate component as the parent component I am trying to render the particles container in. When the parent component state changes, the particles component re-renders on state change of the parent. I'm not passing props to the child particles container so why would it re-render? My particles.json file is in my assets folder and is not being updated. Any suggestions?

import settings from '../../assets/particles.json';

const ParticlesContainer = () => (
  <Container>
    <Particles 
      params={settings} 
    />
  </Container>
);```

[SamBBMe]

Hey, I was just about to report the same issue. I rolled back to version 2.1.0 and it fixed the issue for me.

[dbaileydev]

Hey, I was just about to report the same issue. I rolled back to version 2.1.0 and it fixed the issue for me.

I just got it to work. Ended up breaking it out into a separate component. Seems as though when you have it in a component with state, it re-renders when state changes, couldn't figure out why.

[dbaileydev]

Had to separate component into separate component. Please reference my last comment above.

[andtankian]

This configuration should be normal? I mean, separating Particle Component to another component that doesn't change its state seems like a workaroud, not a fix at all.

Is this the final solution?

[rahulpsd18]

How to get it working though? I created a ParticleComponent which doesn't take in any props and doesn't have any state. I want to use this in a Page which has its own state, but whenever the state changes, the particles jump.

The code is something like:

// Page1
render() {
    return (
        <React.Fragment>
            <ParticleContainer/>
            <div>
                <h3>{this.state.appName}</h3>
                // rest of the JSX which is dependent on state
            </div>
        </React.Fragment>
    );
}

[dpip]

I had this issue with beta version 2.4.0. On certain state changes at the parent level, the particles would re-render and flicker rapidly. I had also tried breaking it out into a separate component along with other tweaks.

Upgrading to version 2.7.0 resolved my issue.