.loadCSSFromString() generating redundant style elements?

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.

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.

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.

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

This topic was solved and automatically closed 3 days after the last reply. New replies are no longer allowed.