Im trying to have light mode and dark mode. Tsparticle is lagging just by adding this code pls help me.

[Nathaniel121215]

background: {
color: mode ? '#ffffff' : '#000000',
}

when mode is change to either true or false it should change the background color but instead the page will bug and lag how to prevent that?

[matteobruni]

background: { color: mode ? '#ffffff' : '#000000', }

when mode is change to either true or false it should change the background color but instead the page will bug and lag how to prevent that?

Please provide a full sample where I can see and test the issue.

[Nathaniel121215]

site link: https://main--pen-tech-solution.netlify.app/

its working properly when i published the site in netlify but when running it on my own machine with npm start and switching to dark mode it will stop and freeze the site.

github: https://github.com/Nathaniel121215/PenTech_Website

the particle is on homepage.jsx

so in conclusion running my own website with npm start and toggling the mode for dark mode freezes the site. But when i deploy it on netlify its working properly.

[matteobruni]

Put this https://github.com/Nathaniel121215/PenTech_Website/blob/b0cc7bb8bb4c6f01ec17d2bff68412c805dc4eaf/pen-tech-react/src/components/Homepage.jsx#L8 in a useCallback with an empty dependency array so this function will be called only once, it's not necessary to call it multiple times

[Nathaniel121215]

Hi, matteo thanks for the help i was able to make it work because of your suggestion.