Particles re-renders on every state change even when it is separate from all the state changes.

I wrapper all the components that have state changes into a wrapper but the Particles component still gets re-rendered on changes.

render() {
   const { isSignedIn, imageUrl, route, box, user } = this.state;
   return (
     <div className="App">
       <Particles className='particles' params={particlesOptions} />
       <ComponentsWrapper 
         isSignedIn={isSignedIn}
         imageUrl={imageUrl}
         route={route}
         box={box} 
         user={user}
         loadUser={this.loadUser}
         onInputChange={this.onInputChange}
         onImageSubmit={this.onImageSubmit}
         onRouteChange={this.onRouteChange}
       />
     </div>
   );
 }
}

[Here2Huynh]

I figured it out. Had to separate the components with state changes into a separate component. Thanks for your time!

[acnologia]

Oh that’s an interesting use case.

I haven’t really tried it yet because there are other features I’m trying to roll out atm, but I’ll definitely try by tomorrow and contact you if I run into any road blocks. Thanks again for your help!