cannot initialize particles later after screen was rendered

[mereka-ta]

I need to render the particles at some time after app screen was rendered, I tried set in state.

This is working because I set it before app screen render

import ParticleComponent from './ParticleComponent';

const App = () => {
    const [renderParticle, setRenderParticle] = useState(null);

   if(renderParticle===null) {
       setRenderParticle(<ParticleComponent />)
  }

   return (
       <div class="main">
             {renderParticle}
       </div>
   );
}

Then, I tried set the component at a later time using setTimeout, the particles are not showing.

if(renderParticle===null) {
    setTimeout(()=>{
         setRenderParticle(<ParticleComponent />)
    }, 100)
}

Any other approach for my case?

[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.

[wufe]

You can use a boolean to condition the rendering, like this https://codesandbox.io/s/143-latest-with-delayed-initialization-i9lsr?file=/src/index.js

[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.