.loadCSSFromString() generating redundant style elements?

[Kamille_Parks]

I’ve noticed that when using .loadCSSFromString() the frontend renders multiple duplicates of the same <style>/<style> element in the DOM body. Is there a way around this that I’m missing? In the example below, .loadCSSFromString() is placed at top-level and not within a loop.

[Kamille_Parks]

Update: I noticed its creating a new <style> everytime State gets updated. Still interested if there’s a way to load the css only once since we can’t use Webpack or some other compiler.

[Stephen_Suen · Accepted solution]

Are you calling loadCSSFromString inside a React component? Assuming the styles don’t need to change, you could move this outside of the component, e.g. call it once at the top of your index file.

[Kamille_Parks]

Yep, you’re right. Could have sworn I put it at top level but I see now its within a component. Thanks Stephen!