Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

A way to clean up unused styles in <head> that emotion create

See original GitHub issue

From what I understand the styles that emotion adds to <head> are never cleaned up and the list of styles grow unbounded.

This can be an issue with single page apps that have components that use styles that are parametrized like this:

function Foo() {
  const [counter, setCounter] = React.useState(0);

  React.useEffect(() => {
    setInterval(() => {
      setCounter((p) => p + 1);
    }, 1000);
  }, []);

  return <Box sx={{ width: counter }} />;
}

By rendering <Foo/> the number of styles will grow and remain in <head> even if Foo is unmounted. To my knowledge there is no way to remove the styles that are unused.

Could we add a way to help SPAs to manage styles/resources?

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

eps1loncommented, Oct 7, 2021

This was already discussed in https://github.com/emotion-js/emotion/issues/2473 and https://github.com/emotion-js/emotion/issues/488

TL;DR: There hasn’t been any strong evidence that suggests growing number of styles is an issue. The cases that do create a larger number of styles over time can usually use a different implementation.

1reaction

siriwatknpcommented, Oct 7, 2021

I haven’t look into detail about this but it seems like issue related to style-engine (emotion). I suggest you create this issue on emotion repo and tag me to see what we can do about this.